Personalized jQuery Slider with automatic sliding

Question

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins.

1st inquiry : How can I achieve horizontal animation for the slider?

2nd inquiry : I want the images to cover both the height and width of their container while maintaining their original proportions. The images may be partially displayed. How can I accomplish this?

3rd inquiry : If anyone has any suggestions on optimizing and refining the slide code to make it more lightweight and elegant, please share your insights.

$(function(){
  setInterval(function(){
    var displayed = $(".img-header.displayed");
    displayed.animate({opacity : 0}, 500, function() {
      displayed.css("display","none");
      displayed.addClass("not-displayed").removeClass("displayed");

      if(displayed.next(".img-header.not-displayed").length == 0){
        $(".img-header:first").css("display","inline-block").css("opacity","1");
        $(".img-header:first").addClass("displayed").removeClass("not-displayed");
        $(".img-header:first").animate({opacity : 1}, 500);
      }
      else{
        displayed.next(".img-header.not-displayed").css("display","inline-block").css("opacity","1");
        displayed.next(".img-header.not-displayed").addClass("displayed").removeClass("not-displayed");
        displayed.next(".img-header.not-displayed").animate({opacity : 1}, 500);
      }                  
    });
  }, 4000);
});

#slider-container{height: 200px; width: 200px;}
#slider-container img.img-header{ width: 100%; height: auto;}
.displayed{display: inline-block;}
.not-displayed{display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
  <img class="img-header displayed" src="https://i.stack.imgur.com/AIHnl.png" />
  <img class="img-header not-displayed" src="https://i.stack.imgur.com/XQrms.png" />
</div>

javascript jquery html css slide

Answer 1

Answer №1

It seems like you are searching for a solution that looks something like this.

The slider is set to have position:relative; with top:100px;, which can be adjusted according to your needs. It is recommended to keep it positioned relatively.

The slider has dimensions of width:700px and height:500px;, but these can be customized based on the aspect ratio of the images you are using. The setup will work well for images with different aspect ratios.

There is an array designated for loading images in sequence from one location, so some additional context on that may be helpful. I've left a comment about this in the JavaScript file.

You also have the flexibility to change the slider speed and delay to suit your preferences.

When you hover over an image, the slider will pause, and then resume once you move away from the image.

Snippet :

$(document).ready(function(){

  var noPannel = document.getElementsByClassName("pannel").length;
  var i;
  var imgArr = [ ];
  var pannelWidth = $(".slider_holder").width();
  var totalWidth = noPannel*pannelWidth;

  for (i=1;i<=noPannel;i++)
  {
    imgArr[i] = "http://www.picget.net/background/" + i + ".jpg"; //if you have somewhere on other path

    //imgArr[i] = " " + i + ".jpg"; //use this if you have image in same folder/path.
  }
  for(i=1;i<=noPannel;i++)
  {
    $(".pannel:nth-child("+i+")").css("background","url("+imgArr[i]+")");
  }
  function jsslider()
  {
    var curScroll = $(".slider").scrollLeft();
    var endScroll = totalWidth - (pannelWidth*2);

    if(curScroll<=endScroll)
    {
      $(".slider").animate({scrollLeft: '+=' + pannelWidth +'px'},900,"swing");// Replace 900 for speed
    }
    else
    {
      $(".slider").animate({scrollLeft: '0px'},500,"swing"); // Replace 500 for speed to go bck to first
    }
  }

  var interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
  $(".pannel").hover(function () {
    clearInterval(interval);
  }, function () {
    interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
  });

}); // document.ready ENDS

html, body, *
{
  margin:0px;
  width:100%;
  height:100%;
}

.slider_holder
{
  margin-left:auto;
  margin-right:auto;
  display:block;
  position:relative;
  top:100px;
  width:1024px;
  height:768px;
  background:#eee;
  overflow:hidden;
}

.slider
{
  width:auto;
  height:100%;
  width:100%;
  white-space: nowrap;
  overflow:hidden;
}

.pannel
{
  margin:0px;
  display:inline-block;
  width:100%;
  height:calc(100% - 1px);
  /*border:1px solid red;*/
  background-size:cover !important;
  background-repeat:no-repeat;
  background-position:50% 50% !important;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="sliderFunc()">
  <div class="slider_holder">
    <div class="slider">
      <span class="pannel"> </span>
      <span class="pannel"> </span>
      <span class="pannel"> </span>
      <span class="pannel"> </span>
      <span class="pannel"> </span>
    </div>
  </div>
</body>

Answer 2

It seems like you are searching for a solution that looks something like this.

The slider is set to have position:relative; with top:100px;, which can be adjusted according to your needs. It is recommended to keep it positioned relatively.

The slider has dimensions of width:700px and height:500px;, but these can be customized based on the aspect ratio of the images you are using. The setup will work well for images with different aspect ratios.

There is an array designated for loading images in sequence from one location, so some additional context on that may be helpful. I've left a comment about this in the JavaScript file.

You also have the flexibility to change the slider speed and delay to suit your preferences.

When you hover over an image, the slider will pause, and then resume once you move away from the image.

Snippet :

$(document).ready(function(){

  var noPannel = document.getElementsByClassName("pannel").length;
  var i;
  var imgArr = [ ];
  var pannelWidth = $(".slider_holder").width();
  var totalWidth = noPannel*pannelWidth;

  for (i=1;i<=noPannel;i++)
  {
    imgArr[i] = "http://www.picget.net/background/" + i + ".jpg"; //if you have somewhere on other path

    //imgArr[i] = " " + i + ".jpg"; //use this if you have image in same folder/path.
  }
  for(i=1;i<=noPannel;i++)
  {
    $(".pannel:nth-child("+i+")").css("background","url("+imgArr[i]+")");
  }
  function jsslider()
  {
    var curScroll = $(".slider").scrollLeft();
    var endScroll = totalWidth - (pannelWidth*2);

    if(curScroll<=endScroll)
    {
      $(".slider").animate({scrollLeft: '+=' + pannelWidth +'px'},900,"swing");// Replace 900 for speed
    }
    else
    {
      $(".slider").animate({scrollLeft: '0px'},500,"swing"); // Replace 500 for speed to go bck to first
    }
  }

  var interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
  $(".pannel").hover(function () {
    clearInterval(interval);
  }, function () {
    interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
  });

}); // document.ready ENDS

html, body, *
{
  margin:0px;
  width:100%;
  height:100%;
}

.slider_holder
{
  margin-left:auto;
  margin-right:auto;
  display:block;
  position:relative;
  top:100px;
  width:1024px;
  height:768px;
  background:#eee;
  overflow:hidden;
}

.slider
{
  width:auto;
  height:100%;
  width:100%;
  white-space: nowrap;
  overflow:hidden;
}

.pannel
{
  margin:0px;
  display:inline-block;
  width:100%;
  height:calc(100% - 1px);
  /*border:1px solid red;*/
  background-size:cover !important;
  background-repeat:no-repeat;
  background-position:50% 50% !important;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="sliderFunc()">
  <div class="slider_holder">
    <div class="slider">
      <span class="pannel"> </span>
      <span class="pannel"> </span>
      <span class="pannel"> </span>
      <span class="pannel"> </span>
      <span class="pannel"> </span>
    </div>
  </div>
</body>

Personalized jQuery Slider with automatic sliding

Answer №1

Similar questions

Showcasing a variety of product titles with the help of CSS

What is causing the unusual behavior of z-index in this specific scenario?

Sending simple form information through AJAX to a PHP web service

Answer processing for the reminder dialog is underway

AngularUi Mobile Modal List Display

The Angular datepicker is failing to trigger the ng-change event

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

Guide to setting up the primary navigation in the WordPress administration panel

Guide to transferring a PHP variable from a loop and converting it into a JavaScript variable

Passing a JSON object between pages in Next.js using props during programmatic navigation

The limitations of Typescript types influence the program's behavior

Tips for maintaining the data on a page continuously updating in AngularJS

Acquiring mapping information through JSON data retrieval

Error in Node.js: Trying to access property 'get' of an undefined object

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Preventing div elements from being highlighted when double-clicked

Eliminate the commas in the JSON string except for the commas that separate arrays

What is the process for clearing the cache of a crawling URL?

Calculating the Bounding Box of SVG Group Elements

How can I include a ?ref query parameter in a URL when linking from external websites?