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

Adjust puppeteer window dimensions when running in non-headless mode (not viewport)

Error: Attempting to append a child to a non-existent property

Tips on applying the "activate" class to a Bootstrap navbar in Angular 2 when implementing page anchor navigation

Exploring the integration of Django Rest Framework with Angular

In Vue Js, the function createUserWithEmailAndPassword does not exist within _firebase_config__WEBPACK_IMPORTED_MODULE_3__.default

Transferring shapes from a two-dimensional equirectangular view to surfaces in A-Frame

Press the button to retrieve the div ID needed for a jQuery modal dialog box

Substitute all instances of <table> with <div> tags, making sure to include specifications for

A concern arises with security when utilizing jQuery alongside json for requesting data from a service

Discovering the oldest date in an array with JavaScript

Using flexbox to adjust the height of a block in the layout

The background of the ACTK Modal Popup vanishes after multiple instances of scrolling up and down

Bug causing connection issues in Node.js when dealing with IP redirection

JSON function invocation is failing to load

The fetch API does not retain PHP session variables when fetching data

Express route encountered an error with an undefined value

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

Exploring the capabilities of HTML5's file API along with Octokit.js to work with

The AJAX response doesn't seem to be halting