Новостной слайдер

Swiper - это современный бесплатный сенсорный слайдер. Он предназначен для использования на адаптивных сайтах и мобильных приложениях. Подробнее о нем и всех его возможностях можно посмотреть на официальном сайте.

Пример:

25 августа 2020 г.

Заголовок новости

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

27 августа 2020 г.

Заголовок новости

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

24 августа 2020 г.

Заголовок новости

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

20 августа 2020 г.

Заголовок новости

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML:

<div class="blog-slider_wrapper">	
	<div class="blog-slider">
		<div class="blog-slider__wrp swiper-wrapper">
			<!-- Карточка -->
			<div class="blog-slider__item swiper-slide">
				<div class="blog-slider__img">
					<img src="https://atuin.ru/demo/640k/cd-cover-2.jpg" alt="">
				</div>
				<div class="blog-slider__content">
					<span class="blog-slider__date">Дата</span>
					<div class="blog-slider__title">Заголовок новости</div>
					<p>Текст новости</p>
					<div class="blog-slider__button-wrapper">
						<a href="#" class="blog-slider__button">Читать далее</a>
					</div>
				</div>
			</div>	
			<!-- Еще карточки -->
		</div>
		<div class="blog-slider__pagination"></div>
	</div>
</div>

</div>

<div class="blog-slider__title">Заголовок новости</div>

<p>Текст новости</p>

<a href="#" class="blog-slider__button">Читать далее</a>

</div>

</div>

</div>

CSS:

Подключаем CSS фреймворка swiper и стили ниже:

.blog-slider * {
	box-sizing: border-box;
}
.blog-slider_wrapper {
	overflow: hidden;
}
.blog-slider {
	width: calc(100% - 100px);
	margin: 20px 0 20px 80px;	
	position: relative;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 8px 22px rgba(0,0,0,0.1);
	padding: 25px 0 20px 0;
	border-radius: 25px;
	transition: all .3s; 
	border: 6px solid #BFE2FF;
}
.blog-slider__item {
	display: flex;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
	opacity: 1;
	transform: none;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
	transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
	transition-delay: 0.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
	transition-delay: 0.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
	transition-delay: 0.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
	transition-delay: 0.7s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
	transition-delay: 0.8s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
	transition-delay: 0.9s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
	transition-delay: 1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
	transition-delay: 1.1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
	transition-delay: 1.2s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
	transition-delay: 1.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
	transition-delay: 1.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
	transition-delay: 1.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
	transition-delay: 1.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
	transition-delay: 1.7s;
}
.blog-slider__img {
	width: 300px;
	height: 300px; 
	flex-shrink: 0;
	background-image: linear-gradient(147deg, #BFE2FF 0%, #337AB7 74%);  
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	border-radius: 25px;
	transform: translateX(-80px) scale(0);
	overflow: hidden;
	opacity: 0;  
}
.blog-slider__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 20px;
	transition: all .3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__img {
	opacity: 1;
	transition-duration: 0.5s;
	transform: translateX(-80px) scale(1);
}
.blog-slider__content {
	transform: translateX(-42px);
}
.blog-slider__content > * {
	opacity: 0;
	transform: translateY(25px);
	transition: all .4s;
}
.blog-slider__date {
	color: #7b7992;
	margin-bottom: 15px;
	display: block;
	font-size: 13px;
	font-family: Verdana, sans-serif;   
	font-weight: bold;
}
.blog-slider__title {
	font-family: 'Roboto', sans-serif;
	font-size: 28px;
	line-height: 30px;
	color: #337AB7;
	margin-bottom: 10px;
}
.blog-slider__content p {
	color: #000;
	margin-bottom: 20px;
	line-height: 20px;
	font-size: 15px;
	font-family: Verdana, sans-serif; 
}
.blog-slider__button-wrapper {
	text-align: right;
}
.blog-slider__button {
	display: inline-flex;
	margin-top: 10px;
	text-decoration: none;
	position: relative;
	font-size: 18px;
	line-height: 18px;
	padding: 12px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
	border-radius: 25px;
}
.blog-slider__button:hover,
.blog-slider__button:active,
.blog-slider__button:focus {
	color: #FFF;
}
.blog-slider__button:after,
.blog-slider__button:before {
	position: absolute;
	height: 4px;
	left: 50%;
	background: #337AB7;
	bottom: -6px;
	content: "";
	transition: all 280ms ease-in-out;
	width: 0;
}
.blog-slider__button:before {
	top: -6px;
}
.blog-slider__button:hover:after,
.blog-slider__button:hover:before,
.blog-slider__button:active:after,
.blog-slider__button:active:before,
.blog-slider__button:focus:after,
.blog-slider__button:focus:before {
	width: calc(100% - 40px);
	left: 20px;
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, 
.blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
	bottom: 10px;
	left: 0;
	width: 100%;
}
.blog-slider__pagination {
	position: absolute;
	z-index: 21;
	right: 20px;
	width: 11px!important;
	left: auto!important;
	top: 20px;
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 8px 0;
}
.blog-slider__pagination .swiper-pagination-bullet {
	width: 11px;
	height: 11px;
	display: block;
	border-radius: 10px;
	background: #062744;
	opacity: 0.2;
	transition: all .3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
	opacity: 1;
	background: #337AB7;
	height: 30px;
	box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
@media screen and (max-width: 768px) {
	.blog-slider {
		width: calc(100% - 10px);
		margin: 180px auto 20px auto;
	}
	.blog-slider__item {
		flex-direction: column;
	}  
	.blog-slider__img {
		margin: auto;
		transform: translateX(0) translateY(-180px) scale(0);
	}
	.blog-slider__item.swiper-slide-active .blog-slider__img {
		opacity: 1;
		transition-duration: 0.5s;
		transform: translateX(0) translateY(-180px) scale(1);
	} 
	.blog-slider__content {
		transform: translateX(0);
		margin-top: -120px;
		text-align: center;
		padding: 0 30px;  
	}
	.blog-slider__button-wrapper {
		text-align: center;
	}	
	.blog-slider__pagination {
		transform: translateX(-50%);
		left: 50%!important;
		top: 170px;
		width: 100%!important;
		display: flex;
		height: 30px;
		justify-content: center;
	}
	.blog-slider__pagination .swiper-pagination-bullet-active {
		height: 11px;
		width: 30px;
	}
	.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 5px;
	} 
}
@media screen and (max-width: 576px) {
	.blog-slider__img {
		width: 260px;
		height: 260px;
	}
	.blog-slider__content {
		padding: 0 12px;  
	}  
	.blog-slider__pagination {
		top: 130px;
	} 
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

.blog-slider * {

box-sizing: border-box;

}

.blog-slider_wrapper {

overflow: hidden;

}

.blog-slider {

width: calc(100% - 100px);

margin: 20px 0 20px 80px;

position: relative;

background: #fff;

box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 8px 22px rgba(0,0,0,0.1);

padding: 25px 0 20px 0;

border-radius: 25px;

transition: all .3s;

border: 6px solid #BFE2FF;

}

.blog-slider__item {

display: flex;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > * {

opacity: 1;

transform: none;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {

transition-delay: 0.3s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {

transition-delay: 0.4s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {

transition-delay: 0.5s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {

transition-delay: 0.6s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {

transition-delay: 0.7s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {

transition-delay: 0.8s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {

transition-delay: 0.9s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {

transition-delay: 1s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {

transition-delay: 1.1s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {

transition-delay: 1.2s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {

transition-delay: 1.3s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {

transition-delay: 1.4s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {

transition-delay: 1.5s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {

transition-delay: 1.6s;

}

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {

transition-delay: 1.7s;

}

.blog-slider__img {

width: 300px;

height: 300px;

flex-shrink: 0;

background-image: linear-gradient(147deg, #BFE2FF 0%, #337AB7 74%);

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

border-radius: 25px;

transform: translateX(-80px) scale(0);

overflow: hidden;

opacity: 0;

}

.blog-slider__img img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

border-radius: 20px;

transition: all .3s;

}

.blog-slider__item.swiper-slide-active .blog-slider__img {

opacity: 1;

transition-duration: 0.5s;

transform: translateX(-80px) scale(1);

}

.blog-slider__content {

transform: translateX(-42px);

}

.blog-slider__content > * {

opacity: 0;

transform: translateY(25px);

transition: all .4s;

}

.blog-slider__date {

color: #7b7992;

margin-bottom: 15px;

display: block;

font-size: 13px;

font-family: Verdana, sans-serif;

font-weight: bold;

}

.blog-slider__title {

font-family: 'Roboto', sans-serif;

font-size: 28px;

line-height: 30px;

color: #337AB7;

margin-bottom: 10px;

}

.blog-slider__content p {

color: #000;

margin-bottom: 20px;

line-height: 20px;

font-size: 15px;

font-family: Verdana, sans-serif;

}

.blog-slider__button-wrapper {

text-align: right;

}

.blog-slider__button {

display: inline-flex;

margin-top: 10px;

text-decoration: none;

position: relative;

font-size: 18px;

line-height: 18px;

padding: 12px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

font-family: 'Roboto', Тahoma, sans-serif;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

border-radius: 25px;

}

.blog-slider__button:hover,

.blog-slider__button:active,

.blog-slider__button:focus {

color: #FFF;

}

.blog-slider__button:after,

.blog-slider__button:before {

position: absolute;

height: 4px;

left: 50%;

background: #337AB7;

bottom: -6px;

content: "";

transition: all 280ms ease-in-out;

width: 0;

}

.blog-slider__button:before {

top: -6px;

}

.blog-slider__button:hover:after,

.blog-slider__button:hover:before,

.blog-slider__button:active:after,

.blog-slider__button:active:before,

.blog-slider__button:focus:after,

.blog-slider__button:focus:before {

width: calc(100% - 40px);

left: 20px;

}

.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,

.blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {

bottom: 10px;

left: 0;

width: 100%;

}

.blog-slider__pagination {

position: absolute;

z-index: 21;

right: 20px;

width: 11px!important;

left: auto!important;

top: 20px;

}

.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {

margin: 8px 0;

}

.blog-slider__pagination .swiper-pagination-bullet {

width: 11px;

height: 11px;

display: block;

border-radius: 10px;

background: #062744;

opacity: 0.2;

transition: all .3s;

}

.blog-slider__pagination .swiper-pagination-bullet-active {

opacity: 1;

background: #337AB7;

height: 30px;

box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);

}

@media screen and (max-width: 768px) {

.blog-slider {

width: calc(100% - 10px);

margin: 180px auto 20px auto;

}

.blog-slider__item {

flex-direction: column;

}

.blog-slider__img {

margin: auto;

transform: translateX(0) translateY(-180px) scale(0);

}

.blog-slider__item.swiper-slide-active .blog-slider__img {

opacity: 1;

transition-duration: 0.5s;

transform: translateX(0) translateY(-180px) scale(1);

}

.blog-slider__content {

transform: translateX(0);

margin-top: -120px;

text-align: center;

padding: 0 30px;

}

.blog-slider__button-wrapper {

text-align: center;

}

.blog-slider__pagination {

transform: translateX(-50%);

left: 50%!important;

top: 170px;

width: 100%!important;

display: flex;

height: 30px;

justify-content: center;

}

.blog-slider__pagination .swiper-pagination-bullet-active {

height: 11px;

width: 30px;

}

.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {

margin: 0 5px;

}

@media screen and (max-width: 576px) {

.blog-slider__img {

width: 260px;

height: 260px;

}

.blog-slider__content {

padding: 0 12px;

}

.blog-slider__pagination {

top: 130px;

}

JS:

Подключаем JS фреймворка swiper и скрипт ниже:

var swiper = new Swiper('.blog-slider', {
	effect: 'fade',
	loop: true,
	mousewheel: {
        invert: false,
	},
	autoHeight: true,
	pagination: {
        el: '.blog-slider__pagination',
        clickable: true,
	}
});

var swiper = new Swiper('.blog-slider', {

effect: 'fade',

loop: true,

mousewheel: {

invert: false,

autoHeight: true,

pagination: {

el: '.blog-slider__pagination',

clickable: true,

}

});

За основу взято решение, найденное на codepen.io у пользователя Muhammed Erdem
Фотографии: kellepics

Илья: 17.01.2023 в 12:55

Все отлично работает! Главное подключить все библиотеки и добавить коды!

Ответить
Андрей: 13.07.2021 в 11:45

Все работает.Не надо наговаривать.

Ответить
Andrey: 09.11.2020 в 15:21

Хотел воспользоваться вашим примером, а он не работает

Ответить
- Alexander: 09.11.2020 в 15:28
  
  Тут же работает 🙂
  Значит что то не добавили или добавили не так...
  
  Ответить
  - Andrey: 06.12.2020 в 14:45
    
    не точно выразился, не хватает поддержки браузеров, в принципе не только у этого слайдера, но и всего остального на сайте.
    
    Ответить
    - Alexander: 06.12.2020 в 19:54
      
      А какая тут поддержка? Это же не css-свойство, которое только для вебкита, например.
      Не про весь же код смотреть и писать
      А на чем тестировался swiper, можно у разработчиков посмотреть 🙂
      В современных браузерах все работает.
      
      Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Горизонтальный таймлайн

Перелистывание изображений при скроллинге

Смена слайдов мышкой или пальцем на Bootstrap 3

Добавить комментарий:

Комментарии: