Slider like animation of divs back and forth?

Question

I want to create a slider, when a corresponding link is clicked the already active slide will animate left and a new slide will animate in after that.

How to accomplish that with the html given?

I'm unable make this work properly using .visible to animate will break the $(this) animate later on. Tried some other way arranging this but still not getting it to work. Maybe i'm going at this the wrong and there are more better ways to accomplish this.

html

  <div class="navigation-container">
    <ul class="navigation">
      <li class="nav-item active"><a data-show="dataitem0">
            Lorem ipsum         </a></li>
      <li class="nav-item"><a data-show="dataitem1">
    </ul>
  </div>

  <div class="data-container">
    <div class="data-inner">
      <div id="dataitem0" class="visible">
        <h2>11111Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsumed lorems vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem1" class="hidden">
        <h2>22222Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
    </div>
  </div>


.hidden {
  display: none;
  left:-400px;
}
.visible {
  display: block;
  left:0;
}
.data-container {
  .data-inner {
    position:relative;
    > div {
      position:absolute;
      width:100%;
      top:0;
    }
  }
}



$('li').on('click', function () {
  //alert('clicked');
  var dataShow = $(this).children('a').data('show');

  //console.log(dataShow);
  $('li').removeClass('active');
  $(this).addClass('active');

  $('.data-inner > div').each( function(){
    var dataItem = $(this).attr('id');

    if (dataShow === dataItem) {
      $('.visible').animate({
        left: "-=400"
      }, 1000, function() {
        // Animation complete.
        console.log('1anim complete');
        //$(this).attr('class', 'hidden');

        $(this).attr('class', 'visible').animate({
          left: "0"
        }, 1000, function() {
          // Animation complete.
          console.log('2anim complete');
        });
      });
    }

  }); // each
}); //click

Codepen: https://codepen.io/rKaiser/pen/LwLEqB Many thanks.

Answer 1

To achieve expected result, use below option of adding .visible class and adding .hidden class to .visible class

var dataItem = $(this).attr("id");
var hideDataItem = $(".visible").attr("id");

      $(".visible").removeClass("visible");
      $("#" + dataItem).addClass("visible");

      $("#" + hideDataItem).addClass("hidden");

working code for reference

$("li").on("click", function() {
  //alert('clicked');
  var dataShow = $(this)
    .children("a")
    .data("show");

  console.log(dataShow);
  $("li").removeClass("active");
  $(this).addClass("active");
  $(".data-inner > div").each(function() {
    var dataItem = $(this).attr("id");
    var hideDataItem = $(".visible").attr("id");
    if (dataShow === dataItem) {
      $(".visible").animate(
        {
          left: "-=500"
        },
        1000,
        function() {
          // Animation complete.
          //console.log('1anim complete');
          $(".visible").removeClass("visible");
          $("#" + dataItem).addClass("visible");

          $("#" + hideDataItem).addClass("hidden");
          $("#" + dataItem)
            .attr("class", "visible")
            .animate(
              {
                left: "0"
              },
              1000,
              function() {
                // Animation complete.
                //console.log('2anim complete');
              }
            );
        }
      );
    }
  }); // each
}); //click

body {
  background: #666;
  color: #ccc;
}
.hidden {
  display: none;
  left:-400px;
}
.visible {
  display: block;
  left:0;
}
.navigation-container {
  display:inline-block;
}
.active {
  color: red;
}
.data-container {
  max-width:400px;
  min-height: 310px;
  width: 100%;
  display: inline-block;
  padding: 10px;
  background: #535353;
  margin-left: 40px;
  .data-inner {
    position:relative;
    > div {
      position:absolute;
      width:100%;
      top:0;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="eda-module-content">

  <div class="navigation-container">
    <ul class="navigation">
      <li class="nav-item active"><a data-show="dataitem0">
            Lorem ipsum         </a></li>
      <li class="nav-item"><a data-show="dataitem1">

            Lorem ipsum  11111111111111       </a></li>
      <li class="nav-item"><a data-show="dataitem2">
            Lorem ipsum   22222      </a></li>
      <li class="nav-item"><a data-show="dataitem3">
            Lorem ipsum    333     </a></li>
      <li class="nav-item"><a data-show="dataitem4">
            Lorem ipsum     444    </a></li>
    </ul>
  </div>

  <div class="data-container">
    <div class="data-inner">
      <div id="dataitem0" class="visible">
        <h2>11111Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem1" class="hidden">
        <h2>22222Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem2" class="hidden">
        <h2>33333Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem3" class="hidden">
        <h2>44444Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
      <div id="dataitem4" class="hidden">
        <h2>555555Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus nisi non sapien laoreet volutpat. Nulla iaculis mi sed felis ultrices, non consequat risus gravida. Donec ut quam at dui eleifend consectetur. Duis consectetur commodo ex
          vel varius. Donec id tincidunt est. Sed lorem velit, rhoncus non lectus vel, tempor ornare leo. In bibendum nunc eu rhoncus ornare. Proin id pulvinar ex.</p>
      </div>
    </div>
  </div>
</div>

codepen - https://codepen.io/nagasai/pen/GVENxp