I builth another Card Slider for news and blog pages etc with swiper.js. I made sweet animations when mouse hover and slide changes. Also all of them responsive.
A Pen by Muhammed Erdem on CodePen.
-
-
Save geomach/0e2c3242b1af19f87f38cda7568c080d to your computer and use it in GitHub Desktop.
Responsive News Card Slider
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrapper"> | |
| <div class="background"> | |
| <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132206/news-slider/background.jpg" alt=""> | |
| </div> | |
| <div class="item-bg"></div> | |
| <div class="news-slider"> | |
| <div class="news-slider__wrp swiper-wrapper"> | |
| <div class="news-slider__item swiper-slide"> | |
| <a href="#" class="news__item"> | |
| <div class="news-date"> | |
| <span class="news-date__title">24</span> | |
| <span class="news-date__txt">May</span> | |
| </div> | |
| <div class="news__title"> | |
| Lorem Ipsum Dolor Sit Amed | |
| </div> | |
| <p class="news__txt"> | |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
| </p> | |
| <div class="news__img"> | |
| <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-2.jpg" alt="news"> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="news-slider__item swiper-slide"> | |
| <a href="#" class="news__item"> | |
| <div class="news-date"> | |
| <span class="news-date__title">25</span> | |
| <span class="news-date__txt">May</span> | |
| </div> | |
| <div class="news__title"> | |
| Lorem Ipsum Dolor Sit Amed | |
| </div> | |
| <p class="news__txt"> | |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
| </p> | |
| <div class="news__img"> | |
| <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-3.jpg" alt="news"> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="news-slider__item swiper-slide"> | |
| <a href="#" class="news__item"> | |
| <div class="news-date"> | |
| <span class="news-date__title">26</span> | |
| <span class="news-date__txt">May</span> | |
| </div> | |
| <div class="news__title"> | |
| Lorem Ipsum Dolor Sit Amed | |
| </div> | |
| <p class="news__txt"> | |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
| </p> | |
| <div class="news__img"> | |
| <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-4.jpg" alt="news"> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="news-slider__item swiper-slide"> | |
| <a href="#" class="news__item"> | |
| <div class="news-date"> | |
| <span class="news-date__title">27</span> | |
| <span class="news-date__txt">May</span> | |
| </div> | |
| <div class="news__title"> | |
| Lorem Ipsum Dolor Sit Amed | |
| </div> | |
| <p class="news__txt"> | |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
| </p> | |
| <div class="news__img"> | |
| <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-2.jpg" alt="news"> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="news-slider__item swiper-slide"> | |
| <a href="#" class="news__item"> | |
| <div class="news-date"> | |
| <span class="news-date__title">28</span> | |
| <span class="news-date__txt">May</span> | |
| </div> | |
| <div class="news__title"> | |
| Lorem Ipsum Dolor Sit Amed | |
| </div> | |
| <p class="news__txt"> | |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
| </p> | |
| <div class="news__img"> | |
| <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-5.jpg" alt="news"> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="news-slider__item swiper-slide"> | |
| <a href="#" class="news__item"> | |
| <div class="news-date"> | |
| <span class="news-date__title">29</span> | |
| <span class="news-date__txt">May</span> | |
| </div> | |
| <div class="news__title"> | |
| Lorem Ipsum Dolor Sit Amed | |
| </div> | |
| <p class="news__txt"> | |
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... | |
| </p> | |
| <div class="news__img"> | |
| <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537132205/news-slider/item-4.jpg" alt="news"> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="news-slider__ctr"> | |
| <div class="news-slider__arrows"> | |
| <button class="news-slider__arrow news-slider-prev"> | |
| <span class="icon-font"> | |
| <svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg> | |
| </span> | |
| </button> | |
| <button class="news-slider__arrow news-slider-next"> | |
| <span class="icon-font"> | |
| <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg> | |
| </span> | |
| </button> | |
| </div> | |
| <div class="news-slider__pagination"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <svg hidden="hidden"> | |
| <defs> | |
| <symbol id="icon-arrow-left" viewBox="0 0 32 32"> | |
| <title>arrow-left</title> | |
| <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path> | |
| </symbol> | |
| <symbol id="icon-arrow-right" viewBox="0 0 32 32"> | |
| <title>arrow-right</title> | |
| <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path> | |
| </symbol> | |
| </defs> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var bg = document.querySelector('.item-bg'); | |
| var items = document.querySelectorAll('.news__item'); | |
| var item = document.querySelector('.news__item'); | |
| function cLog(content) { | |
| console.log(content) | |
| } | |
| if($(window).width() > 800) { | |
| $(document).on("mouseover", ".news__item", function (_event, _element) { | |
| var newsItem = document.querySelectorAll('.news__item'); | |
| newsItem.forEach(function (element, index) { | |
| element.addEventListener('mouseover', function () { | |
| var x = this.getBoundingClientRect().left; | |
| var y = this.getBoundingClientRect().top; | |
| var width = this.getBoundingClientRect().width; | |
| var height = this.getBoundingClientRect().height; | |
| $('.item-bg').addClass('active'); | |
| $('.news__item').removeClass('active'); | |
| // $('.news__item').removeClass('active'); | |
| bg.style.width = width + 'px'; | |
| bg.style.height = height + 'px'; | |
| bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)'; | |
| }); | |
| element.addEventListener('mouseleave', function () { | |
| $('.item-bg').removeClass('active'); | |
| $('.news__item').removeClass('active'); | |
| }); | |
| }); | |
| }); | |
| } | |
| var swiper = new Swiper('.news-slider', { | |
| effect: 'coverflow', | |
| grabCursor: true, | |
| loop: true, | |
| centeredSlides: true, | |
| keyboard: true, | |
| spaceBetween: 0, | |
| slidesPerView: 'auto', | |
| speed: 300, | |
| coverflowEffect: { | |
| rotate: 0, | |
| stretch: 0, | |
| depth: 0, | |
| modifier: 3, | |
| slideShadows: false | |
| }, | |
| breakpoints: { | |
| 480: { | |
| spaceBetween: 0, | |
| centeredSlides: true | |
| } | |
| }, | |
| simulateTouch: true, | |
| navigation: { | |
| nextEl: '.news-slider-next', | |
| prevEl: '.news-slider-prev' | |
| }, | |
| pagination: { | |
| el: '.news-slider__pagination', | |
| clickable: true | |
| }, | |
| on: { | |
| init: function () { | |
| var activeItem = document.querySelector('.swiper-slide-active'); | |
| var sliderItem = activeItem.querySelector('.news__item'); | |
| $('.swiper-slide-active .news__item').addClass('active'); | |
| var x = sliderItem.getBoundingClientRect().left; | |
| var y = sliderItem.getBoundingClientRect().top; | |
| var width = sliderItem.getBoundingClientRect().width; | |
| var height = sliderItem.getBoundingClientRect().height; | |
| $('.item-bg').addClass('active'); | |
| bg.style.width = width + 'px'; | |
| bg.style.height = height + 'px'; | |
| bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)'; | |
| } | |
| } | |
| }); | |
| swiper.on('touchEnd', function () { | |
| $('.news__item').removeClass('active'); | |
| $('.swiper-slide-active .news__item').addClass('active'); | |
| }); | |
| swiper.on('slideChange', function () { | |
| $('.news__item').removeClass('active'); | |
| }); | |
| swiper.on('slideChangeTransitionEnd', function () { | |
| $('.news__item').removeClass('active'); | |
| var activeItem = document.querySelector('.swiper-slide-active'); | |
| var sliderItem = activeItem.querySelector('.news__item'); | |
| $('.swiper-slide-active .news__item').addClass('active'); | |
| var x = sliderItem.getBoundingClientRect().left; | |
| var y = sliderItem.getBoundingClientRect().top; | |
| var width = sliderItem.getBoundingClientRect().width; | |
| var height = sliderItem.getBoundingClientRect().height; | |
| $('.item-bg').addClass('active'); | |
| bg.style.width = width + 'px'; | |
| bg.style.height = height + 'px'; | |
| bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)'; | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext'); | |
| html { | |
| position: relative; | |
| overflow-x: hidden!important; | |
| } | |
| body { | |
| font-family: 'Quicksand', sans-serif; | |
| } | |
| a, a:hover { | |
| text-decoration: none; | |
| } | |
| .icon { | |
| display: inline-block; | |
| width: 1em; | |
| height: 1em; | |
| stroke-width: 0; | |
| stroke: currentColor; | |
| fill: currentColor; | |
| } | |
| .background { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| left: 0; | |
| top: 0; | |
| &:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: linear-gradient(45deg, rgba(209, 0, 42, 0.6) 0%, #0E5DC4 100%); | |
| opacity: 0.9; | |
| } | |
| img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| } | |
| .item-bg { | |
| width: 300px; | |
| height: 500px; | |
| position: absolute; | |
| top: 30px; | |
| background: #fff; | |
| border-radius: 10px; | |
| box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25); | |
| opacity: 0; | |
| transition: all .3s; | |
| left: -30px; | |
| //left: 50%; | |
| //transform: translateX(-50%); | |
| &.active { | |
| left: 0; | |
| top: 0; | |
| opacity: 1; | |
| } | |
| } | |
| .news { | |
| &-slider { | |
| z-index: 2; | |
| max-width: 1300px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 60px; | |
| @media screen and (max-width: 1300px){ | |
| max-width: 1000px; | |
| } | |
| @media screen and (max-width: 576px) { | |
| margin-top: 45px; | |
| } | |
| &__wrp { | |
| display: flex; | |
| align-items: flex-start; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| &__item { | |
| width: 400px; | |
| flex-shrink: 0; | |
| //padding: 15px; | |
| @media screen and (max-width: 992px) { | |
| width: 340px; | |
| } | |
| &.swiper-slide { | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all .3s; | |
| } | |
| &.swiper-slide-active, | |
| &.swiper-slide-prev, | |
| &.swiper-slide-next { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| } | |
| &__ctr { | |
| position: relative; | |
| z-index: 12; | |
| } | |
| &__arrow { | |
| background: #fff; | |
| border: none; | |
| display: inline-flex; | |
| width: 50px; | |
| height: 50px; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25); | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 50%; | |
| z-index: 12; | |
| cursor: pointer; | |
| outline: none!important; | |
| &:focus { | |
| outline: none!important; | |
| } | |
| .icon-font { | |
| display: inline-flex; | |
| } | |
| &.news-slider-prev { | |
| left: 15px; | |
| transform: translateY(-50%); | |
| } | |
| &.news-slider-next { | |
| right: 15px; | |
| transform: translateY(-50%); | |
| } | |
| } | |
| &__pagination { | |
| text-align: center; | |
| margin-top: 50px; | |
| // @media screen and (max-width: 576px) { | |
| // margin-top: 50px; | |
| // } | |
| .swiper-pagination-bullet { | |
| width: 13px; | |
| height: 10px; | |
| display: inline-block; | |
| background: #fff; | |
| opacity: .2; | |
| margin: 0 5px; | |
| border-radius: 20px; | |
| transition: opacity .5s, background-color .5s, width .5s; | |
| transition-delay: .5s, .5s, 0s; | |
| } | |
| .swiper-pagination-bullet-active { | |
| opacity: 1; | |
| background: #ffffff; | |
| width: 100px; | |
| transition-delay: 0s; | |
| @media screen and (max-width: 576px) { | |
| width: 70px; | |
| } | |
| } | |
| } | |
| } | |
| &__item { | |
| padding: 40px; | |
| color: #fff; | |
| border-radius: 10px; | |
| display: block; | |
| transition: all .3s; | |
| @media screen and (min-width: 800px) { | |
| &:hover { | |
| color: #222222; | |
| transition-delay: .1s; | |
| //background: #fff; | |
| //box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25); | |
| .news-date,.news__title,.news__txt { | |
| opacity: 1; | |
| transition-delay: .1s; | |
| } | |
| .news__img { | |
| box-shadow: none; | |
| } | |
| } | |
| } | |
| &.active { | |
| color: #222222; | |
| .news-date,.news__title,.news__txt { | |
| opacity: 1; | |
| } | |
| .news__img { | |
| box-shadow: none; | |
| } | |
| } | |
| @media screen and (max-width: 992px) { | |
| padding: 30px; | |
| } | |
| @media screen and (max-width: 576px) { | |
| padding: 20px; | |
| } | |
| } | |
| &-date { | |
| padding-bottom: 20px; | |
| margin-bottom: 20px; | |
| border-bottom: 2px solid; | |
| display: inline-block; | |
| opacity: .7; | |
| transition: opacity .3s; | |
| @media screen and (max-width: 576px) { | |
| margin-bottom: 10px; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-bottom: 0; | |
| } | |
| &__title { | |
| display: block; | |
| font-size: 32px; | |
| margin-bottom: 10px; | |
| font-weight: 500; | |
| @media screen and (max-width: 576px) { | |
| margin-right: 10px; | |
| } | |
| } | |
| &__txt { | |
| font-size: 16px; | |
| } | |
| } | |
| &__title { | |
| font-size: 25px; | |
| font-weight: 500; | |
| opacity: .7; | |
| margin-top: 10px; | |
| margin-bottom: 15px; | |
| transition: opacity .3s; | |
| @media screen and (max-width: 576px) { | |
| font-size: 22px; | |
| margin-bottom: 10px; | |
| } | |
| } | |
| &__txt { | |
| margin: 10px 0; | |
| line-height: 1.6em; | |
| font-size: 15px; | |
| opacity: .7; | |
| transition: opacity .3s; | |
| } | |
| &__img { | |
| border-radius: 10px; | |
| box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25); | |
| height: 200px; | |
| margin-top: 30px; | |
| width: 100%; | |
| transition: all .3s; | |
| transform-origin: 0% 0%; | |
| @media screen and (max-width: 576px) { | |
| height: 180px; | |
| margin-top: 20px; | |
| } | |
| img { | |
| max-width: 100%; | |
| border-radius: 10px; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| } | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment