TV Shows Slider — Необычный слайдер с плавным перелистыванием слайдов на jQuery
Представляем вам TV Shows Slider — оригинальный и функциональный слайдер для вашего сайта, который предлагает плавное перелистывание слайдов, выполненное с использованием jQuery. Этот слайдер идеально подходит для отображения списка телевизионных шоу, фильмов или любых других коллекций, позволяя пользователю наслаждаться гладким переходом между элементами.
Каждый слайд в слайдере плавно перемещается, создавая ощущение легкости и удобства. Такой подход улучшает взаимодействие с сайтом и делает просмотр контента более приятным.
Особенности:
- 🔄 Плавное перелистывание слайдов.
- 💻 Легкая интеграция на сайт с использованием jQuery.
- 🎬 Подходит для отображения списка ТВ-шоу, фильмов, продуктов или любой другой информации.
- 🔧 Простота в настройке и адаптации под различные устройства.
See the Pen TV Shows Slider by Ivan Grozdic (@ig_design) on CodePen.
HTML
<div class="section full-height over-hide z-bigger"><div class="hero-center-section"><div class="container"><div class="row justify-content-center"><div class="col-12 col-sm-5 col-md-5 col-xl-4 align-self-center"><div class="img-wrap"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/1.jpg" alt=""></div></div><div class="col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4 pl-4 align-self-center mt-4 mt-sm-0 text-center text-sm-left"><h3 class="mb-1">Supernatural</h3><p class="small mb-2 opacity-60">44min | Drama, Fantasy, Horror</p><p class="mb-0"><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow opacity-40"><i class='uil uil-star'></i></span><span class="ml-1 ml-sm-3 size-18 color-yellow">8.5/10</span></p><p class="mt-4 pt-2 mb-0 d-none d-sm-block">Two brothers follow their father's footsteps as hunters, fighting evil supernatural beings of many kinds, including monsters, demons, and gods that roam the earth.</p></div></div></div></div><div class="hero-center-section"><div class="container"><div class="row justify-content-center"><div class="col-12 col-sm-5 col-md-5 col-xl-4 align-self-center"><div class="img-wrap"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/2.jpg" alt=""></div></div><div class="col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4 pl-4 align-self-center mt-4 mt-sm-0 text-center text-sm-left"><h3 class="mb-1">Arrow</h3><p class="small mb-2 opacity-60">42min | Action, Adventure, Crime</p><p class="mb-0"><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow opacity-40"><i class='uil uil-star'></i></span><span class="color-yellow opacity-40"><i class='uil uil-star'></i></span><span class="ml-1 ml-sm-3 size-18 color-yellow">7.7/10</span></p><p class="mt-4 pt-2 mb-0 d-none d-sm-block">Spoiled billionaire playboy Oliver Queen is missing and presumed dead when his yacht is lost at sea. He returns five years later a changed man, determined to...</p></div></div></div></div><div class="hero-center-section"><div class="container"><div class="row justify-content-center"><div class="col-12 col-sm-5 col-md-5 col-xl-4 align-self-center"><div class="img-wrap"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/3.jpg" alt=""></div></div><div class="col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4 pl-4 align-self-center mt-4 mt-sm-0 text-center text-sm-left"><h3 class="mb-1">Gotham</h3><p class="small mb-2 opacity-60">42min | Action, Crime, Drama</p><p class="mb-0"><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow opacity-40"><i class='uil uil-star'></i></span><span class="color-yellow opacity-40"><i class='uil uil-star'></i></span><span class="ml-1 ml-sm-3 size-18 color-yellow">7.9/10</span></p><p class="mt-4 pt-2 mb-0 d-none d-sm-block">The story behind Detective James Gordon's rise to prominence in Gotham City in the years before Batman's arrival.</p></div></div></div></div><div class="hero-center-section"><div class="container"><div class="row justify-content-center"><div class="col-12 col-sm-5 col-md-5 col-xl-4 align-self-center"><div class="img-wrap"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/4.jpg" alt=""></div></div><div class="col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4 pl-4 align-self-center mt-4 mt-sm-0 text-center text-sm-left"><h3 class="mb-1">The Flash</h3><p class="small mb-2 opacity-60">43min | Action, Adventure, Drama</p><p class="mb-0"><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow"><i class='uil uil-star'></i></span><span class="color-yellow opacity-40"><i class='uil uil-star'></i></span><span class="color-yellow opacity-40"><i class='uil uil-star'></i></span><span class="ml-1 ml-sm-3 size-18 color-yellow">7.9/10</span></p><p class="mt-4 pt-2 mb-0 d-none d-sm-block">After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City.</p></div></div></div></div><div class="hero-left-section"><ul class="slide-buttons"><li class="hover-target"></li><li class="hover-target"></li><li class="hover-target"></li><li class="hover-target"></li></ul></div></div><!-- Page cursor================================================== --><div class='cursor' id="cursor"></div><div class='cursor2' id="cursor2"></div><div class='cursor3' id="cursor3"></div><!-- Link to page================================================== --><a href="https://front.codes" class="link-to-page hover-target" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/logo-new.png" alt=""></a><div class="bottom-right"><div class="switch"><div class="circle hover-target"></div></div></div>
CSS
/* Please ❤ this if you like it! */@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');:root {--white: #ffffff;--black: #000000;--dark-blue: #1f2029;--dark-light: #424455;--red: #da2c4d;--yellow: #f8ab37;--grey: #ecedf3;}/* #Primary================================================== */body{width: 100%;height: 100vh;background: var(--dark-blue);overflow: hidden;font-family: 'Poppins', sans-serif;font-size: 16px;line-height: 30px;-webkit-transition: all 300ms linear;transition: all 300ms linear;}p{font-family: 'Poppins', sans-serif;font-size: 16px;line-height: 30px;color: var(--white);-webkit-transition: all 300ms linear;transition: all 300ms linear;}p.small{font-size: 12px;line-height: 18px;letter-spacing: 1px;}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family: 'Poppins', sans-serif;margin-bottom: 0.6rem;color: var(--white);}h3, .h3 {font-size: 38px;line-height: 48px;font-weight: 700;-webkit-transition: all 300ms linear;transition: all 300ms linear;}::selection {color: var(--white);background-color: var(--black);}::-moz-selection {color: var(--white);background-color: var(--black);}mark{color: var(--white);background-color: var(--black);}.color-yellow {color: var(--yellow);}.size-18{font-size: 18px;}.opacity-40{opacity: 0.4;}.opacity-60{opacity: 0.6;}.section {position: relative;width: 100%;display: block;}.over-hide {overflow: hidden;}.full-height {height: 100vh;}.hero-center-section{position: absolute;top: 50%;left: 0;width: 100%;z-index: 100;transform: translateY(-60%);opacity: 0;-webkit-transition: all 300ms linear;transition: all 300ms linear;}.hero-center-section.show{transform: translateY(-50%);opacity: 1;}.poster-transition.show{transform: translateY(0);opacity: 1;visibility: visible;}.z-bigger {z-index: 30 !important;}.img-wrap {position: relative;width: 100%;overflow: hidden;border-radius: 4px;box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.25);display: block;}.img-wrap img {width: 100%;height: auto;display: block;}.hero-left-section{position: absolute;top: 50%;transform: translateY(-50%);left: 30px;z-index: 1000;-webkit-transition: all 300ms linear;transition: all 300ms linear;}.slide-buttons{position: relative;margin: 0;padding: 0;list-style: none;}.slide-buttons li{position: relative;display: block;margin: 15px 0;padding: 0;list-style: none;cursor: pointer;overflow: hidden;width: 50px;height: 50px;border-radius: 4px;background-size: cover;background-position: center;-webkit-transition: all 300ms linear;transition: all 300ms linear;}.slide-buttons li:after{position: absolute;display: block;border-radius: 4px;top: 0;left: 0;width: 100%;height: 100%;content: '';background-color: transparent;-webkit-transition: all 300ms linear;transition: all 300ms linear;}.slide-buttons li.active{box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);}.slide-buttons li.active:after{background-color: rgba(20,20,20,.4);}.slide-buttons li:nth-child(1){background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/1.jpg');;}.slide-buttons li:nth-child(2){background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/2.jpg');;}.slide-buttons li:nth-child(3){background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/3.jpg');;}.slide-buttons li:nth-child(4){background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/4.jpg');;}/* #Cursor================================================== */.cursor,.cursor2,.cursor3{position: fixed;border-radius: 50%;transform: translateX(-50%) translateY(-50%);pointer-events: none;left: -100px;top: 50%;mix-blend-mode: difference;-webkit-transition: all 300ms linear;transition: all 300ms linear;}.cursor{background-color: var(--white);height: 0;width: 0;z-index: 99999;}.cursor2,.cursor3{height: 36px;width: 36px;z-index:99998;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.cursor2.hover,.cursor3.hover{-webkit-transform:scale(2) translateX(-25%) translateY(-25%);transform:scale(2) translateX(-25%) translateY(-25%);border:none}.cursor2{border: 2px solid var(--white);box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);}.cursor2.hover{background: rgba(255,255,255,1);box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);}.link-to-page {position: fixed;top: 30px;right: 30px;z-index: 20000;cursor: pointer;width: 30px;}.link-to-page img{width: 100%;height: auto;display: block;}.bottom-right{position: absolute;bottom: 50px;right: 30px;z-index: 1000;}.switch,.circle {-webkit-transition: all 300ms linear;transition: all 300ms linear;}.switch {width: 80px;height: 4px;border-radius: 27px;background-image: linear-gradient(298deg, var(--red), var(--yellow));position: relative;display: block;margin: 0 auto;text-align: center;opacity: 1;transform: translate(0);transition: all 300ms linear;transition-delay: 1900ms;}.circle {cursor: pointer;position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 40px;height: 40px;border-radius: 50%;background: var(--dark-light);box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);}.circle:hover {box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);}.circle:before {position: absolute;font-family: 'unicons';content: '\eac1';top: 0;left: 0;z-index: 2;font-size: 20px;line-height: 40px;text-align: center;width: 100%;height: 40px;opacity: 1;color: var(--grey);-webkit-transition: all 300ms linear;transition: all 300ms linear;}.circle:after {position: absolute;font-family: 'unicons';content: '\eb8f';top: 0;left: 0;z-index: 2;font-size: 20px;line-height: 40px;text-align: center;width: 100%;height: 40px;color: var(--yellow);opacity: 0;-webkit-transition: all 300ms linear;transition: all 300ms linear;}.switched {}.switched .circle {left: 40px;box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);background: var(--dark);}.switched .circle:hover {box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);}.switched .circle:before {opacity: 0;}.switched .circle:after {opacity: 1;}body.light{background: var(--white);}body.light p{color: var(--dark-blue);}body.light h3{color: var(--dark);}body.light .cursor,body.light .cursor2,body.light .cursor3{mix-blend-mode: difference;z-index: 9999999;}body.light .cursor{background-color: var(--dark-blue);}body.light .cursor2{border: 2px solid var(--dark-blue);box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);}body.light .cursor2.hover{background: rgba(0,0,0,1);box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);}@media (max-width: 991px) {.hero-center-section{left: 50px;width: calc(100% - 50px);}.hero-left-section{left: 20px;}.slide-buttons li{width: 30px;height: 30px;}}@media (max-width: 767px) {h3, .h3 {font-size: 26px;line-height: 34px;}.cursor,.cursor2,.cursor3{display: none;}}@media (max-width: 575px) {h3, .h3 {font-size: 22px;line-height: 30px;}}
JS
/* Please ❤ this if you like it! */(function($) { "use strict";//Page cursorsdocument.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {t.style.left = n.clientX + "px",t.style.top = n.clientY + "px",e.style.left = n.clientX + "px",e.style.top = n.clientY + "px",i.style.left = n.clientX + "px",i.style.top = n.clientY + "px"});var t = document.getElementById("cursor"),e = document.getElementById("cursor2"),i = document.getElementById("cursor3");function n(t) {e.classList.add("hover"), i.classList.add("hover")}function s(t) {e.classList.remove("hover"), i.classList.remove("hover")}s();for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {o(r[a])}function o(t) {t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)}var pos = 0;if ($(window).width() > 1200) {window.setInterval(function(){pos++;document.getElementsByClassName('moving-image')[0].style.backgroundPosition = pos + "px 0px";}, 18)};//Switch light/dark$(".switch").on('click', function () {if ($("body").hasClass("light")) {$("body").removeClass("light");$(".switch").removeClass("switched");}else {$("body").addClass("light");$(".switch").addClass("switched");}});$(document).ready(function() {/* Hero Case study images */$('.slide-buttons li:nth-child(1)').on('mouseenter', function() {$('.slide-buttons li.active').removeClass('active');$('.hero-center-section.show').removeClass("show");$('.hero-center-section:nth-child(1)').addClass("show");$('.slide-buttons li:nth-child(1)').addClass('active');})$('.slide-buttons li:nth-child(2)').on('mouseenter', function() {$('.slide-buttons li.active').removeClass('active');$('.hero-center-section.show').removeClass("show");$('.hero-center-section:nth-child(2)').addClass("show");$('.slide-buttons li:nth-child(2)').addClass('active');})$('.slide-buttons li:nth-child(3)').on('mouseenter', function() {$('.slide-buttons li.active').removeClass('active');$('.hero-center-section.show').removeClass("show");$('.hero-center-section:nth-child(3)').addClass("show");$('.slide-buttons li:nth-child(3)').addClass('active');})$('.slide-buttons li:nth-child(4)').on('mouseenter', function() {$('.slide-buttons li.active').removeClass('active');$('.hero-center-section.show').removeClass("show");$('.hero-center-section:nth-child(4)').addClass("show");$('.slide-buttons li:nth-child(4)').addClass('active');})$('.slide-buttons li:nth-child(1)').trigger('mouseenter')});})(jQuery);
tv-shows-slider.zip
0
37.88 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!