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);
  });

  function slider(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-holder img {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0;
    opacity: 0;
    top: 0;
    left: 100%;
    transition: left ease 1s;
    position: absolute;
}
.image-holder img.transition {
  animation: moveSlider ease 2s;
  opacity: 1;
}
@keyframes moveSlider {
  0% {
    left: 50%;
  }
  50% {
    left: -100%;
  }
  100% {
    opacity: 0;
    left: 100%;
  }
}
.image-holder img.active {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

/*END image row allignment*/

.text-holder p{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%;
}

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

.thumbnails img: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-points a{
  font-size: 40px;
  text-decoration: none;
  color: #ccc;
  
}

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

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

      </div>
</div>