JavaScript horizontal slider designed for a seamless user experience

Question

JavaScript horizontal slider designed for a seamless user experience

Currently, I am in the process of developing a slideshow that includes thumbnails. While my slideshow is functional, I am facing an issue with limited space to display all thumbnails horizontally. I am considering implementing a horizontal slider for the thumbnails upon hover or when clicking on previous/next buttons. It's important that my solution be written solely in JavaScript without the use of libraries.

If you're curious about where I'm currently at, feel free to check out this link as the complete code is contained within a single page.

-- EDIT

Below is the HTML snippet:

<div class="controls">
    <a class="previous" href=""><img src="images/fleche_g.jpg" alt=""></a>
    <div class="thumbs">
        <ul id="thumbs">
        </ul>
    </div>
    <a class="next" href=""><img src="images/fleche_d.jpg" alt=""></a>
</div>

The CSS styles applied are as follows:

.controls {
    width: 658px;
    height: 76px;
    margin-top: 10px;
}

#thumbs {
    display: inline-block;
    overflow: hidden;
    height: 76px;
    position: relative;
    z-index: 99;
}

.controls .previous, .controls .next {
    float: left;
    width: 51px;
    height: 76px;
    position: relative;
    z-index: 999;
}

.controls .previous {
    background: transparent url('images/fleche_g.jpg') 0 0 no-repeat;
}


.controls .next {
    background: transparent url('images/fleche_d.jpg') 0 0 no-repeat;
}

In addition, here are the two functions I attempted to call onClick of the previous/next buttons:

    // Move thumbs to the left
function left() {
    document.getElementById('thumbs').style.left = '-124px';
}

// Move thumbs to the right
function right() {
    document.getElementById('thumbs').style.right = '-124px';
}

Despite my efforts, nothing seems to be working properly. Any insights on what could potentially be missing?

javascript slide

Answer 1

Answer №1

If you're looking to solve your issue, consider adding a new function called getLeft(). The rest of the adjustments involve tweaking existing functions and CSS styles.

To allow for more images, the client may need to press the right-button multiple times to reach the end. You could also implement additional calculations to limit the range so that all images stay within the boundaries of the .wrapper-thumbs (don't hesitate to reach out for further assistance).

Note: if you prefer the left and right buttons to behave differently (some designs switch them), simply interchange the values 500 <-> -500.

Alternatively, do you want just enough images so that one press of the button takes you completely to the left or right?

CSS:

#slideshow .controls .wrapper-thumbs {
  overflow: hidden;
  position: relative;  
  float: left;          
  margin: 0;
  width: 556px;
  height: 76px;
}

#thumbs {
  display: inline-block;
  width: 900px;
  height: 76px;
  position: absolute;  
  z-index: 99;
}

Script:

// Retrieve the numeric value of style.left by removing 'px'
function getLeft() {
 var left = document.getElementById('thumbs').style.left;
 return Number(left.substr(0, left.length - 2));
}

// Move thumbnails to the left
function left() {
 var currentLeft = getLeft();
 var newLeft = currentLeft - 500;
 document.getElementById('thumbs').style.left = newLeft + 'px';
}

// Move thumbnails to the right
function right() {
 var currentLeft = getLeft();
 var newLeft = currentLeft + 500;
 document.getElementById('thumbs').style.left = newLeft + 'px';
}

Answer 2

If you're looking to solve your issue, consider adding a new function called getLeft(). The rest of the adjustments involve tweaking existing functions and CSS styles.

To allow for more images, the client may need to press the right-button multiple times to reach the end. You could also implement additional calculations to limit the range so that all images stay within the boundaries of the .wrapper-thumbs (don't hesitate to reach out for further assistance).

Note: if you prefer the left and right buttons to behave differently (some designs switch them), simply interchange the values 500 <-> -500.

Alternatively, do you want just enough images so that one press of the button takes you completely to the left or right?

CSS:

#slideshow .controls .wrapper-thumbs {
  overflow: hidden;
  position: relative;  
  float: left;          
  margin: 0;
  width: 556px;
  height: 76px;
}

#thumbs {
  display: inline-block;
  width: 900px;
  height: 76px;
  position: absolute;  
  z-index: 99;
}

Script:

// Retrieve the numeric value of style.left by removing 'px'
function getLeft() {
 var left = document.getElementById('thumbs').style.left;
 return Number(left.substr(0, left.length - 2));
}

// Move thumbnails to the left
function left() {
 var currentLeft = getLeft();
 var newLeft = currentLeft - 500;
 document.getElementById('thumbs').style.left = newLeft + 'px';
}

// Move thumbnails to the right
function right() {
 var currentLeft = getLeft();
 var newLeft = currentLeft + 500;
 document.getElementById('thumbs').style.left = newLeft + 'px';
}

JavaScript horizontal slider designed for a seamless user experience

Answer №1

Similar questions

Using JavaScript/jQuery to tally characters

Employing Isotope/jQuery for organizing posts on Tumblr in columns with the ability to infinitely scroll

What is the process for getting involved with npm commands?

I possess a dataset and desire to correlate each element to different elements

The function createReadStream completes execution without resolving

Firefox only loads images and jquery after a refresh of the page

Mastering the correct usage of the submitHandler method in the jQuery validation plugin

gulp - synchronized gulp.pipe(gulp.dest) execution

Using ThreeJs and TweenJS to insert a delay between tweens using a for loop

Looping through items using ng-repeat according to the chosen option in a select dropdown

Can $.ajax be used as a replacement for $(document).ready(function()?

The module 'pouchdb' appears to be missing, functioning correctly on Mac but encountering issues on Windows

Converting JSON data types into TypeScript interface data types

Access the JSON file, make changes to a specific value, and then save the

The search button is malfunctioning after I submit search data and generate dynamic HTML using axios

Enhancing the session helper in Silex with additional values

Step-by-step Guide to Setting pageProps Property in Next.js Pages

The (ReactJS + Redux) form fails to load when the /new segment is appended to the URL

Instructions on dynamically positioning a collection of div elements at the center of a webpage container

Difficulty in detecting state changes without refreshing the component when using Redux and React