logo

Slider animation responsive


JavaScript (jQuery)

  1. $(function(){
  2.         $('.slider-item').eq(0).addClass('active');
  3.         var total = $('.slider-item').length;
  4.         var current = 0;
  5.         $('#moveRight').on('click', function(){
  6.             var next=current;
  7.             current= current+1;
  8.             setSlide(next, current);
  9.         });
  10.         $('#moveLeft').on('click', function(){
  11.             var prev=current;
  12.             current = current- 1;
  13.             setSlide(prev, current);
  14.         });
  15.         function setSlide(prev, next){
  16.             var slide= current;
  17.             if(next>total-1){
  18.                 slide=0;
  19.                 current=0;
  20.             }
  21.             if(next<0){
  22.                 slide=total - 1;
  23.                 current=total - 1;
  24.             }
  25.             $('.slider-item').eq(prev).removeClass('active');
  26.             $('.slider-item').eq(slide).addClass('active');
  27.             setTimeout(function(){
  28.  
  29.             },800);
  30.         }
  31.     });

Html

  1. <div class="slider-section">
  2.     <div class="slider main">
  3.         <div class="slider__nav">
  4.         <span id="moveLeft" class="slider__arrow">
  5.             <svg class="slider__icon" width="24" height="24" viewBox="0 0 24 24">
  6.                 <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
  7.             </svg>
  8.         </span>
  9.             <span id="moveRight" class="slider__arrow">
  10.             <svg class="slider__icon" width="24" height="24" viewBox="0 0 24 24">
  11.                 <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
  12.             </svg>
  13.         </span>
  14.         </div> <?php
  15.         $args = array('posts_per_page' => 3,);
  16.         $recent = new WP_Query($args);
  17.         while( $recent -> have_posts()) : $recent -> the_post();
  18.             ?> <div class="slider-item slider-item--1">
  19.                 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
  20.                     <div class="slider-item__image"><?php the_post_thumbnail( 'post_thumbnail' ); ?></div>
  21.                     <div class="slider-item__info">
  22.                         <div class="slider-item__container">
  23.                             <h2 class="slider-item__subtitle"><?php the_category() ?> </h2>
  24.                             <h1 class="slider-item__title"><?php the_title() ?></h1>
  25.                             <p class="slider-item__description"><?php the_excerpt() ?></p>
  26.                         </div>
  27.                     </div>
  28.                 </a>
  29.             </div> <?php endwhile; ?>
  30.     </div>
  31. </div>

CSS

  1. .slider-section {
  2.   margin: 0;
  3.   padding: 0;
  4.   width: 100%;
  5.   height: 550px;
  6.   display: flex;
  7.   display: -webkit-flex;
  8.   justify-content: center;
  9.   -webkit-justify-content: center;
  10.   align-items: center;
  11.   -webkit-align-items: center;
  12. }
  13.  
  14. .slider.main {
  15.   overflow: visible;
  16. }
  17.  
  18. .slider {
  19.   width: 100%;
  20.   height: 100%;
  21.   display: flex;
  22.   max-width: 890px;
  23.   max-height: 540px;
  24.   overflow: visible;
  25.   position: absolute;
  26.   background: #fff;
  27. }
  28.  
  29. .slider-item {
  30.   visibility: visible;
  31.   display: flex;
  32.   width: 100%;
  33.   height: 100%;
  34.   align-items: center;
  35.   justify-content: flex-end;
  36.   -webkit-align-items: center;
  37.   -webkit-justify-content: flex-end;
  38.   position: relative;
  39.   /* background-color: #fff; */
  40.   flex-shrink: 0;
  41.   -webkit-flex-shrink: 0;
  42.   position: absolute;
  43.   z-index: 0;
  44.   /* transition: 1s all ease-out; */
  45. }
  46.  
  47. .slider-item__info {
  48.   height: auto;
  49.   display: flex;
  50.   justify-content: center;
  51.   flex-direction: column;
  52.   display: -webkit-flex;
  53.   -webkit-justify-content: center;
  54.   -webkit-flex-direction: column;
  55.   right: -50px;
  56.   margin: auto;
  57.   padding: 10px 40px;
  58.   width: 40%;
  59.   position: absolute;
  60.   background: #fff;
  61.   z-index: 1;
  62.   box-shadow: 0 0 10px 0 #dbdbdb;
  63.   visibility: hidden;
  64. }
  65.  
  66. .slider-item__image {
  67.   width: 100%;
  68.   height: 100%;
  69.   align-self: flex-end;
  70.   flex-basis: 100%;
  71.   -webkit-align-self: flex-end;
  72.   -webkit-flex-basis: 100%;
  73.   position: relative;
  74.   /* transform: translateX(100%); */
  75.   /* transition: 1s all ease-in-out; */
  76. }
  77.  
  78. .slider-item__subtitle {
  79.   letter-spacing: 3px;
  80.   font-size: 10px;
  81.   text-transform: uppercase;
  82.   margin: 0;
  83.   color: #7E7E7E;
  84.   font-weight: 700;
  85.   /* transform: translateY(25%); */
  86.   opacity: 0;
  87.   visibility: hidden;
  88.   /* transition: 1s all ease-in-out; */
  89. }
  90.  
  91. .slider-item__title {
  92.   margin: 15px 0 0 0;
  93.   font-size: 44px;
  94.   line-height: 45px;
  95.   letter-spacing: 3px;
  96.   font-weight: 700;
  97.   color: #2C2C2C;
  98.   transform: translateY(25%);
  99.   opacity: 0;
  100.   visibility: hidden;
  101.   transition: 1s all ease-in-out;
  102. }
  103.  
  104. .slider-item__description {
  105.   /* transform: translateY(25%); */
  106.   opacity: 0;
  107.   visibility: hidden;
  108.   transition: 1s all ease-out;
  109.   margin-top: 35px;
  110.   font-size: 13px;
  111.   color: #7e7e7e;
  112.   line-height: 22px;
  113.   margin-bottom: 35px;
  114. }
  115.  
  116. .slider__nav {
  117.   position: absolute;
  118.   right: 10px;
  119.   z-index: 2;
  120.   background-color: #fff;
  121.   bottom: 10px;
  122. }
  123.  
  124. .slider__icon {
  125.   display: inline-block;
  126.   vertical-align: middle;
  127.   width: 16px;
  128.   fill: #5d5d5d;
  129. }
  130.  
  131. .slider__arrow {
  132.   cursor: pointer;
  133.   display: inline-block;
  134.   padding: 11px 15px;
  135.   position: relative;
  136. }
  137.  
  138. .slider__arrow:nth-child(1):after {
  139.   content: '';
  140.   right: -3px;
  141.   position: absolute;
  142.   width: 1px;
  143.   background-color: #b0b0b0;
  144.   height: 14px;
  145.   top: 50%;
  146.   margin-top: -7px;
  147. }
  148.  
  149. .active {
  150.   z-index: 1;
  151.   display: flex;
  152.   visibility: visible;
  153. }
  154.  
  155. .active .slider-item__subtitle,
  156. .active .slider-item__title,
  157. .active .slider-item__description,
  158. .active .slider-item__btn {
  159.   transform: translateY(0);
  160.   opacity: 1;
  161.   transition: 1s all ease-in-out;
  162.   visibility: visible;
  163. }
  164.  
  165. .active .slider-item__image {
  166.   transition: 1s all ease-in-out;
  167.   transform: translateX(0);
  168.   -webkit-animation-name: fadeInLeft;
  169.   animation-name: fadeInLeft;
  170.   -webkit-animation-duration: 1s;
  171.   animation-duration: 1s;
  172.   -webkit-animation-duration: 1s;
  173.   animation-duration: 1s;
  174.   -webkit-animation-fill-mode: both;
  175.   animation-fill-mode: both;
  176.   visibility: hidden;
  177.   z-index: 1;
  178. }
  179.  
  180. .active .slider-item__info {
  181.   transition: 1s all ease-in-out;
  182.   transform: translateX(0);
  183.   -webkit-animation-name: fadeInRight;
  184.   animation-name: fadeInRight;
  185.   -webkit-animation-duration: 1s;
  186.   animation-duration: 1s;
  187.   -webkit-animation-duration: 1s;
  188.   animation-duration: 1s;
  189.   -webkit-animation-fill-mode: both;
  190.   animation-fill-mode: forwards;
  191.   visibility: hidden;
  192.   z-index: 1;
  193. }
  194.  
  195. @-webkit-keyframes fadeInRight {
  196.   from {
  197.     opacity: 0;
  198.     -webkit-transform: translate3d(10%, 0, 0);
  199.     transform: translate3d(10%, 0, 0);
  200.     visibility: hidden;
  201.   }
  202.  
  203.   to {
  204.     opacity: 1;
  205.     -webkit-transform: translate3d(0, 0, 0);
  206.     transform: translate3d(0, 0, 0);
  207.     visibility: visible;
  208.   }
  209. }
  210. @keyframes fadeInRight {
  211.   from {
  212.     opacity: 0;
  213.     -webkit-transform: translate3d(10%, 0, 0);
  214.     transform: translate3d(10%, 0, 0);
  215.     visibility: hidden;
  216.   }
  217.  
  218.   to {
  219.     opacity: 1;
  220.     -webkit-transform: translate3d(0, 0, 0);
  221.     transform: translate3d(0, 0, 0);
  222.     visibility: visible;
  223.   }
  224. }
  225.  
  226. @-webkit-keyframes fadeInLeft {
  227.   from {
  228.     opacity: 0;
  229.     -webkit-transform: translate3d(-10%, 0, 0);
  230.     transform: translate3d(-10%, 0, 0);
  231.   }
  232.  
  233.   to {
  234.     opacity: 1;
  235.     -webkit-transform: translate3d(0, 0, 0);
  236.     transform: translate3d(0, 0, 0);
  237.     visibility: visible;
  238.   }
  239. }
  240. @keyframes fadeInLeft {
  241.   from {
  242.     opacity: 0;
  243.     -webkit-transform: translate3d(-10%, 0, 0);
  244.     transform: translate3d(-10%, 0, 0);
  245.   }
  246.  
  247.   to {
  248.     opacity: 1;
  249.     -webkit-transform: translate3d(0, 0, 0);
  250.     transform: translate3d(0, 0, 0);
  251.     visibility: visible;
  252.   }
  253. }
  254. @media (max-width: 425px) {
  255. .slider.main {
  256. padding: 0;
  257. margin: 0;
  258. }
  259.  
  260. .slider-item {
  261. flex-direction: column;
  262. }
  263.  
  264. .slider-item__info {
  265. position: initial;
  266. padding: 1rem;
  267. width: 100%;
  268. height: 100%;
  269. border: 1px solid #bbb;
  270. box-shadow: 1px 1px 1px 1px #bbb;
  271. }
  272.  
  273. .slider-item__image img {
  274. width: 100vw;
  275. height: 225px;
  276. }
  277. }
  278.  
  279. @media (min-width: 768px) {
  280. .slider.main {
  281. width: 85%;
  282. }
  283.  
  284. .slider-item__image img {
  285. width: 100vw;
  286. max-height: 550px;
  287. }
  288. }