Jquery Css - Slider Swipe Animation

UPDATE: Updated the code and added a better example to clearify what I want to achieve. I have built a slider with jQuery. I give each element the class .active which displays the

Solution 1:

You can do something like this using using CSS3,

Give each image an absolute position and give each image a width & height value.

Set the image container height so your slider pager sit below the images.

I use both @keyframes and transition to demonstrate how you can achieve the effect.

And in your javascript slider function, I added a function to add and remove the transition.

$(document).ready(function() {

  var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
  var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
  var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
  var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];

  var i = 1;
  var currentSlide = 1;
  var time = 3000;
  var sliderTimer = setInterval(slider, time);


  // slider navigation
  $('.bullet-points a, .thumbnails img').click(function(e) {
    e.preventDefault();
    var pos = $(this).index();
    clearInterval(sliderTimer); // stop auto slideshow
    sliderTimer = false;
    slider(pos);
  });

  functionslider(pos) {
    currentSlide = i;
    if (typeof(pos) !== 'undefined') {
      i = pos;
      images[currentSlide - 1].removeClass("active").addClass('transition');
      text[currentSlide - 1].removeClass("active");
      thumbnails[currentSlide - 1].removeClass("active-thumbnail");
      bullets[currentSlide - 1].removeClass("active-bullet");
    }
    if (i != 0) {
      images[i - 1].removeClass("active").addClass('transition');
      text[i - 1].removeClass("active");
      thumbnails[i - 1].removeClass("active-thumbnail");
      bullets[i - 1].removeClass("active-bullet");
    }
    if (i == images.length) { i = 0 }
    images[i].addClass("active");
    setTimeout(function() {
      $(".image-holder img").removeClass('transition');
    },1000);
    text[i].addClass("active");
    thumbnails[i].addClass("active-thumbnail");
    bullets[i].addClass("active-bullet");
    i++;
    if (!sliderTimer) {
      sliderTimer = setInterval(slider, time); // start auto slideshow
    }
  }

});

/*how I could allign the images in one row*/.image-holder {
    display: inline-block;
    width: 100%;
    height: 220px;
}

.image-holderimg {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0;
    opacity: 0;
    top: 0;
    left: 100%;
    transition: left ease 1s;
    position: absolute;
}
.image-holderimg.transition {
  animation: moveSlider ease 2s;
  opacity: 1;
}
@keyframes moveSlider {
  0% {
    left: 50%;
  }
  50% {
    left: -100%;
  }
  100% {
    opacity: 0;
    left: 100%;
  }
}
.image-holderimg.active {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

/*END image row allignment*/.text-holderp{margin: 0;}
.slider{
  padding:15px;
  margin-top: 50px;
  /*background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ');*/background-color: blue;
  background-repeat: no-repeat;
  background-size: 100%100%;
  display: inline-block;
  width: 100%;
}

.thumbnails {
  height: 100%;
}

.thumbnailsimg {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 5px;
}

.thumbnailsimg:hover{
  cursor: pointer;
}


.text-holder.text {
  display: none;
}
.text-holder.text.active {
  display: block;
}

/*display active image*/.active {
}

.active-bullet{
  color: #E22C26!important;
}

/*hide thumbnail when image is active*/.active-thumbnail{
  display: none!important;
}

.bullet-points{
  display: block;
  text-align: center;
}

.bullet-pointsa{
  font-size: 40px;
  text-decoration: none;
  color: #ccc;
  
}

.bullet-pointsa:hover{
  color: #E22C26!important;
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="slider"><divclass="row"><divclass="col-md-4"><divclass="image-holder"><imgsrc="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg"class="active"><imgsrc="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg"><imgsrc="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg"><imgsrc="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg"></div><divclass="bullet-points"><ahref="_self"class="active-bullet">&bull;</a><ahref="_self">&bull;</a><ahref="_self">&bull;</a><ahref="_self">&bull;</a></div></div><divclass="col-md-1"><divclass="thumbnails"><imgsrc="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg"class="active-thumbnail"><imgsrc="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg"><imgsrc="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg"><imgsrc="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg"></div></div><divclass="col-md-7"><divclass="text-holder"><divclass="text active"><p>Lorem Ipsum</p><h1>Giant Heading 1</h1><p>Some more text</p></div><divclass="text"><p>Lorem Ipsum</p><h1>Giant Heading 2</h1><p>Some more text</p></div><divclass="text"><p>Lorem Ipsum</p><h1>Giant Heading 3</h1><p>Some more text</p></div><divclass="text"><p>Lorem Ipsum</p><h1>Giant Heading 4</h1><p>Some more text</p></div></div></div></div></div>