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

There is an issue with the syntax in your for-loop control where a closing parenthesis is missing

Generating a tag next to an entry field using material-ui's TextField and getInputProps

Effortlessly sending multiple forms on a single page via POST in Express JS without the need for page refresh

Utilize Page.evaluate() to send multiple arguments

displaying a PDF file in Safari

behavior of the back button within an AngularJS program

Invoking an express route using JavaScript

Is it possible to send information in an AJAX request without using the data key?

When utilizing jQuery.Mockjax to simulate the JSON data, the Backbone.Collection.fetch() function consistently results in a 404 error

Obtaining POST information from Web2py to a personal HTML document

Utilizing SVG and CSS together: Implementing clip-path in a flexbox layout

Transforming a flat TypeScript array into a nested object structure

The Material UI text field on mobile devices causes the screen to zoom in, cutting off the top content and displaying the bottom of the page

The z-index property does not seem to be affecting the positioning of images and buttons

Waiting for state changes in React by using the UseState Hook

Invoke a separate function after a successful Ajax request

`Issues encountered with resizing the menu``

"How to retrieve data from a nested object in MongoDB by referencing variables

Interacting with CSS buttons using Selenium

What is the best way to format PHP emailed content from a web form?