Uninterrupted movement within a picture carousel

Question

Uninterrupted movement within a picture carousel

Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single movement while maintaining the left to right/right to left motion?

HTML:

<div id="wrapper">
  <div id="nav">
    <button id="prev" disabled>&lt;&lt;&lt;</button>
    <button id="next">&gt;&gt;&gt;</button>
  </div>
  <div id="mask">
    <div id="item1" class="item">
      <a name="item1"></a>
      <div class="content">
        <img id="image1" src="http://placehold.it/350x150"/>
        <img id="image2" src="http://placehold.it/350x150"/>
        <img id="image3" src="http://placehold.it/350x150"/>
        <img id="image4" src="http://placehold.it/350x150"/>
        <img id="image5" src="http://placehold.it/350x150"/>
        <img id="image6" src="http://placehold.it/350x150"/>
        <img id="image7" src="http://placehold.it/350x150"/>
        <img id="image8" src="http://placehold.it/350x150"/>
        <img id="image9" src="http://placehold.it/350x150"/>
        <img id="image10"src="http://placehold.it/350x150"/>
      </div>
    </div>
    <div id="item2" class="item">
      <div class="content">
        <img id="image1" src="http://placehold.it/350x150"/>
        <img id="image2" src="http://placehold.it/350x150"/>
        <img id="image3" src="http://placehold.it/350x150"/>
        <img id="image4" src="http://placehold.it/350x150"/>
        <img id="image5" src="http://placehold.it/350x150"/>
        <img id="image6" src="http://placehold.it/350x150"/>
        <img id="image7" src="http://placehold.it/350x150"/>
        <img id="image8" src="http://placehold.it/350x150"/>
        <img id="image9" src="http://placehold.it/350x150"/>
        <img id="image10"src="http://placehold.it/350x150"/>
      </div>
    </div>

  </div>
</div>

CSS:

#wrapper {
  width: 100%;
  height: 350px;
  /*position: absolute;*/
  top: 0;
  left: 0;
  background-color: white;
  overflow: hidden;
}
#nav button {
  position: absolute;
  top: 100px;
}
#prev {
  left: 40px;
}
#next {
  right: 40px;
}
#mask {
  width: 5000px;
  height: 100%;
  background-color: white;
}    
.item {
    width: 1200px;
    height: 100%;
    float: left;
    background-color: white;
}
.content img {
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
}
.content {
    width: 50%;
    height: 220px;
    top: 20%;
    margin: auto;
    background-color: white;
    position: relative;
}       
.content a {
    position: relative;
    top: -17px;
    left: 170px;
}
.selected {
    background: #fff;
    font-weight: 700;
}
.clear {
    clear:both;
}

JQUERY:

$(document).ready(function () {
  function shift(direction) {
    var 
      $mask = $('#mask'),  
      items = $('.item').size(),
      currentItem = $mask.data('currentItem'),
      newItem;

    if (currentItem == undefined) {
      currentItem = 0;
    }

    newItem = currentItem + direction;
    $mask.data('currentItem', newItem).animate({marginLeft: -1200 * newItem});

    if (newItem == 0) {
      $("#prev").prop('disabled', true);
    } else {
      $("#prev").prop('disabled', false);
    }    
    if (newItem == items - 1) {
      $("#next").prop('disabled', true);
    } else {
      $("#next").prop('disabled', false);
    }
  }

  $('#prev').click(function() {
    return shift(-1);
  });
  $('#next').click(function() {
    return shift(1);
  });
});

JSFIDDLE: https://jsfiddle.net/24jw3xub/

javascript jquery html css

Answer 1

Answer №1

Do you require something similar to the code below?

    <!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
 <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>

html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

  </style>
</head>

<h1>Simple Slider Example</h1>
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li><img  src="http://placehold.it/350x150"/></li>
    <li><img  src="http://placehold.it/350x150"/></li>
    <li><img  src="http://placehold.it/350x150"/></li>
    <li><img  src="http://placehold.it/350x150"/></li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 
<body>

  <script>
  $(document).ready(function(){

    $('#checkbox').change(function(){
        setInterval(function () {
            moveRight();
        }, 3000);
      });

        var slideCount = $('#slider ul li').length;
        var slideWidth = $('#slider ul li').width();
        var slideHeight = $('#slider ul li').height();
        var sliderUlWidth = slideCount * slideWidth;

        $('#slider').css({ width: slideWidth, height: slideHeight });

        $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

        $('#slider ul li:last-child').prependTo('#slider ul');

        function moveLeft() {
            $('#slider ul').animate({
                left: + slideWidth
            }, 200, function () {
                $('#slider ul li:last-child').prependTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };

        function moveRight() {
            $('#slider ul').animate({
                left: - slideWidth
            }, 200, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };

        $('a.control_prev').click(function () {
            moveLeft();
        });

        $('a.control_next').click(function () {
            moveRight();
        });

  });
  </script>

</body>
</html>

Answer 2

Do you require something similar to the code below?

    <!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
 <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>

html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

  </style>
</head>

<h1>Simple Slider Example</h1>
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li><img  src="http://placehold.it/350x150"/></li>
    <li><img  src="http://placehold.it/350x150"/></li>
    <li><img  src="http://placehold.it/350x150"/></li>
    <li><img  src="http://placehold.it/350x150"/></li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 
<body>

  <script>
  $(document).ready(function(){

    $('#checkbox').change(function(){
        setInterval(function () {
            moveRight();
        }, 3000);
      });

        var slideCount = $('#slider ul li').length;
        var slideWidth = $('#slider ul li').width();
        var slideHeight = $('#slider ul li').height();
        var sliderUlWidth = slideCount * slideWidth;

        $('#slider').css({ width: slideWidth, height: slideHeight });

        $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

        $('#slider ul li:last-child').prependTo('#slider ul');

        function moveLeft() {
            $('#slider ul').animate({
                left: + slideWidth
            }, 200, function () {
                $('#slider ul li:last-child').prependTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };

        function moveRight() {
            $('#slider ul').animate({
                left: - slideWidth
            }, 200, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };

        $('a.control_prev').click(function () {
            moveLeft();
        });

        $('a.control_next').click(function () {
            moveRight();
        });

  });
  </script>

</body>
</html>

Uninterrupted movement within a picture carousel

Answer №1

Similar questions

Having problems with the classList.toggle function?

Navigational highlighting of current page section on a one-page website

Change this npm script into a gulp task

Issue with Chrome extension: inability to submit values

Utilize the Vue-Chartjs plugin registration for a specific chart component only

What is the best way to halt the ticking of this clock in JavaScript?

Uh-oh! Trouble loading web app dependencies: 404 Error

Can a new EJS file be generated using the existing file as a template?

tips on sending multiple data- id in a modal window

Center an element on the screen by dynamically adjusting its position according to the media query

Querying an HTML Table's thead and tfoot sections

Incorporating an external TypeScript script into JavaScript

Using Jquery to add new HTML content and assign an ID to a variable

Throttle the RxJs interval based on the inner observables

Converting Ajax Request Headers from UTF-8 to ISO Character Set

CSS - Guidelines for Targeting Multiple Elements

Issue with Webstorm not automatically updating changes made to JavaScript files

I'm having some trouble with my middleware test in Jest - what could be going wrong?

Is there a way to prompt WebAPI to receive a complicated object as its argument for a DELETE HTTP request without relying on C# attributes?

Understanding the scope of variables in a JavaScript callback function