Create a stylish div slider with interactive menu using Jquery

Question

Create a stylish div slider with interactive menu using Jquery

Currently, I am in need of creating a slider for a <div>. However, most plugins are too large for my needs, so I am attempting to develop my own jQuery script since I only require the basic functionality. Admittedly, I am a novice in jQuery and could benefit from some assistance.

Presently, I have a container <div> (with overflow:hidden and a width of 250px), inside which there is another <div> that should move from right to left (width of 2500px). I aim for this div to animate on the $(document).ready function in increments of 250px to the left, with a 5-second interval. After spending all morning attempting to start this project, I find myself at a standstill.

In addition, I would like to include the following features:

Once the inner <div> reaches the far left, it should fade back to its original position.
A method to create "dots" for navigation to specific positions, where the slides then begin animating from that location.

I understand this is a complex question, but any guidance, no matter how small, would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

I have put together a demonstration that meets all your criteria. Please take a look at this sample link. The jQuery and JavaScript code is well-documented for your reference, but feel free to ask if you need further clarification!

Answer 2

I have put together a demonstration that meets all your criteria. Please take a look at this sample link. The jQuery and JavaScript code is well-documented for your reference, but feel free to ask if you need further clarification!

Answer 3

Answer №2

Check out the jsBin demo

Here is the HTML code:

<div id="slider">    
  <div id="slider_cont">
    <div id="slide">
       <!-- insert wide content here -->
    </div>    
  </div>  
  <div id="dots"><!--leave empty--></div> 
</div>

CSS for styling:

#slider_cont{
  width:250px;
  height:180px;
  position:relative;
  background:#eee;
  overflow:hidden;
}
#slide{
  position:absolute;
  left:0;
  width:2500px;
  height:180px;
}
.dot{
  cursor:pointer;
  background:#444;
  width:10px;
  height:10px;
  margin:4px 2px;
  position:relative;
  float:left;
  border-radius:10px;
}
.dot.active{
  background:#49a;
}

jQuery functions included:

var steps = 10,  // Set number of steps
    delay = 3500,// Set delay time
    galW = $('#slider_cont').width(),
    c = 0,      // counter
    intv;       // interval

// Generate dots dynamically
for(i=0;i<steps;i++){
 $('#dots').append('<div class="dot" />'); 
}
$('#dots .dot').eq(c).addClass('active');

// Animation function
function anim(){
  c=c%steps; // Reset counter to '0' if greater than steps
  $('#slide').stop().animate({left: '-'+galW*c},800);
  $('#dots .dot').removeClass('active').eq(c).addClass('active');
}

// Auto slide function
function auto(){
  intv = setInterval(function(){
    c++; anim();
  },delay);
}
auto(); // Start auto slide

// Pause slider on mouseenter
$('#slider').on('mouseenter mouseleave',function(e){
  var evt = e.type=='mouseenter'? clearInterval(intv) : auto();
});

// Click on dots to animate
$('#dots').on('click','.dot',function(){
  c=$(this).index(); anim();
});

If you have any questions about the code, feel free to ask!

Answer 4

Check out the jsBin demo

Here is the HTML code:

<div id="slider">    
  <div id="slider_cont">
    <div id="slide">
       <!-- insert wide content here -->
    </div>    
  </div>  
  <div id="dots"><!--leave empty--></div> 
</div>

CSS for styling:

#slider_cont{
  width:250px;
  height:180px;
  position:relative;
  background:#eee;
  overflow:hidden;
}
#slide{
  position:absolute;
  left:0;
  width:2500px;
  height:180px;
}
.dot{
  cursor:pointer;
  background:#444;
  width:10px;
  height:10px;
  margin:4px 2px;
  position:relative;
  float:left;
  border-radius:10px;
}
.dot.active{
  background:#49a;
}

jQuery functions included:

var steps = 10,  // Set number of steps
    delay = 3500,// Set delay time
    galW = $('#slider_cont').width(),
    c = 0,      // counter
    intv;       // interval

// Generate dots dynamically
for(i=0;i<steps;i++){
 $('#dots').append('<div class="dot" />'); 
}
$('#dots .dot').eq(c).addClass('active');

// Animation function
function anim(){
  c=c%steps; // Reset counter to '0' if greater than steps
  $('#slide').stop().animate({left: '-'+galW*c},800);
  $('#dots .dot').removeClass('active').eq(c).addClass('active');
}

// Auto slide function
function auto(){
  intv = setInterval(function(){
    c++; anim();
  },delay);
}
auto(); // Start auto slide

// Pause slider on mouseenter
$('#slider').on('mouseenter mouseleave',function(e){
  var evt = e.type=='mouseenter'? clearInterval(intv) : auto();
});

// Click on dots to animate
$('#dots').on('click','.dot',function(){
  c=$(this).index(); anim();
});

If you have any questions about the code, feel free to ask!

Answer 5

Answer №3

Check out the revised program on JSFiddle

live demo here

Answer 6

Check out the revised program on JSFiddle

live demo here

Create a stylish div slider with interactive menu using Jquery

Answer №1

Answer №2

Check out the jsBin demo

Answer №3

Similar questions

What is the best way to declare media queries for resolutions both above and below 1366?

Expanding Text Area in AngularJS

Footer that is adhered to the bottom of the page with a

What is the regular expression that allows numbers between 1 and 24, including decimals?

How to trigger a forced download of a .csv file instead of displaying it in the browser using HTML

Go through the embedded classes within the WWW::Selenium module

Arrange the footer content into multiple columns

The basic node API request is not showing any information

What is the best way to navigate from a button in NextJS to another page that I have built within the same application?

Storing the current URL in the controller prior to leaving the page

Tips on switching the positions of two links when they are clicked using jQuery

Implementing AJAX mysqli interaction in PHP following the MVC design pattern

How can I swap a string for a symbol in JavaScript?

Utilizing jQuery to dynamically convert a dropdown into a multiselect when triggered by the selection of another dropdown within a form containing cloned

Tips for utilizing the async.js library in combination with the await keyword?

Having difficulty transforming both scale and box-shadow at the same time

jQuery has the ability to generate the initial dynamic page prior to running any functions

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Shift the image down to the bottom of the sidebar

Encountering a problem when trying to dynamically change the value in a dropdown menu with Angular.js