What improvements can I make to enhance the functionality of this carousel?

Question

What improvements can I make to enhance the functionality of this carousel?

Check out the demo here.

The purpose of this script is to automatically adjust image sizes based on window size, ensuring consistent proportions across different screen resolutions.

Here are some challenges I have encountered with it and I am seeking solutions to improve its elegance and smoothness:

While it works well in larger resolutions (1280+), issues arise when viewed in 1024 or lower resolutions.
Scrolling behavior is not as smooth as desired.
Issues with alignment, such as white border disappearance in '3-up' or '4-up' views at 1680 resolution.
Misalignment occurs when reaching the end of a scroll in '4-up' view.
There is repetitive code that needs refining for multiple views.
Initial loading time takes approximately 3 seconds, showing smaller versions before resizing them, which appears untidy.
Seeking general optimization tips for smoother functionality.

You can view the relevant parts below, or examine the source code on the feedback page:

HTML:

<div id="compare_view" align="center">
    <!-- HTML content omitted for brevity -->
    </div>

CSS:

#slider-code { 
        /* CSS styles omitted for brevity */
    }

    /* Additional CSS rules omitted for brevity */

    #compare_view .compv-navbar img {
        /* CSS styles omitted for brevity */
    }

JS:

/* JS code omitted for conciseness */

I placed the JavaScript inside the window.load function to ensure proper detection of window size for image resizing. Your input and suggestions would be greatly appreciated!

Thank you.

Edit: Looking for assistance to resolve new issues after implementing suggested changes.

Edit 2: Facing challenges with recent modifications, seeking guidance to restore functionality. Visit the link above to see the updated version.

javascript jquery html css carousel

Answer 1

Answer №1

While this code is completely untested and a bit of a stab in the dark, it may offer some assistance with organizing your code and potentially improving performance through caching repetitive selectors.

However, please note that it may not resolve your specific issue related to the 4-up problem.

//Declare global variables
var oImg, sliderCode, sliderViewPort,sliderOverViewImg , win_width;
var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width;
var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width;

function setUp(numImages) {
    oImg_height = oImg.height(); 
    oImg_width = oImg.width();
    oImg_ratio = oImg_height / oImg_width; 
    tImg_width = (win_width * 0.915) / num_of_images; 
    tImg_height = tImg_width * oImg_ratio;  
    sliderCode_w = sliderCode.width();
    sliderCode_h = sliderCode.height();
    var ul_width = $('#slider-code .viewport ul').width();

    // Code for resizing images
    $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height });   

    rImg_width = sliderOverViewImg.width(); 
    rImg_height = sliderOverViewImg.height(); 

    // Adjust elements based on resized image dimensions
    $('#slider-code .next').css({ 'top': rImg_height / 2 });
    $('#slider-code .prev').css({ 'top': rImg_height / 2 });
    sliderCode.css({ 'width': '100%', 'height': rImg_height + 10 });
    sliderViewport.css({ 'width': win_width * 0.94, 'height': rImg_height + 10 });
    $('#slider-code .overview li').css({ 'width': rImg_width + 5 });
    view_new_w = sliderViewPort.width();
    view_new_h = sliderViewPort.height();
    li_w = $('#slider-code .overview li').width();
    rUl_width = $('#slider-code .viewport ul').width(); 

    // Initialize TinyCarousel plugin
    sliderCode.tinycarousel({ controls: true, animation: true, display: 1 });

}

$(window).load(function() {
    // Cache common elements
    oImg = $('#slider-code .viewport .overview img:eq(1)');
    sliderCode = $('#slider-code');
    sliderViewPort = $('#slider-code .viewport');
    sliderOverViewImg = $('#slider-code .viewport .overview img:eq(1)');

    win_width = $(window).width();
    num_of_images = 2; 

    // Event handler for changing number of displayed images
    $("#viewbar img").click(function(e) {
        num_of_images = parseInt($(this).attr("data-id"), 10); 
        $('#viewname').text(num_of_images + '-up');

        setUp(num_of_images);

        e.preventDefault();
    });

    // Default setup
    setUp(num_of_images);

})

Best of luck!

Answer 2

While this code is completely untested and a bit of a stab in the dark, it may offer some assistance with organizing your code and potentially improving performance through caching repetitive selectors.

However, please note that it may not resolve your specific issue related to the 4-up problem.

//Declare global variables
var oImg, sliderCode, sliderViewPort,sliderOverViewImg , win_width;
var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width;
var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width;

function setUp(numImages) {
    oImg_height = oImg.height(); 
    oImg_width = oImg.width();
    oImg_ratio = oImg_height / oImg_width; 
    tImg_width = (win_width * 0.915) / num_of_images; 
    tImg_height = tImg_width * oImg_ratio;  
    sliderCode_w = sliderCode.width();
    sliderCode_h = sliderCode.height();
    var ul_width = $('#slider-code .viewport ul').width();

    // Code for resizing images
    $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height });   

    rImg_width = sliderOverViewImg.width(); 
    rImg_height = sliderOverViewImg.height(); 

    // Adjust elements based on resized image dimensions
    $('#slider-code .next').css({ 'top': rImg_height / 2 });
    $('#slider-code .prev').css({ 'top': rImg_height / 2 });
    sliderCode.css({ 'width': '100%', 'height': rImg_height + 10 });
    sliderViewport.css({ 'width': win_width * 0.94, 'height': rImg_height + 10 });
    $('#slider-code .overview li').css({ 'width': rImg_width + 5 });
    view_new_w = sliderViewPort.width();
    view_new_h = sliderViewPort.height();
    li_w = $('#slider-code .overview li').width();
    rUl_width = $('#slider-code .viewport ul').width(); 

    // Initialize TinyCarousel plugin
    sliderCode.tinycarousel({ controls: true, animation: true, display: 1 });

}

$(window).load(function() {
    // Cache common elements
    oImg = $('#slider-code .viewport .overview img:eq(1)');
    sliderCode = $('#slider-code');
    sliderViewPort = $('#slider-code .viewport');
    sliderOverViewImg = $('#slider-code .viewport .overview img:eq(1)');

    win_width = $(window).width();
    num_of_images = 2; 

    // Event handler for changing number of displayed images
    $("#viewbar img").click(function(e) {
        num_of_images = parseInt($(this).attr("data-id"), 10); 
        $('#viewname').text(num_of_images + '-up');

        setUp(num_of_images);

        e.preventDefault();
    });

    // Default setup
    setUp(num_of_images);

})

Best of luck!

What improvements can I make to enhance the functionality of this carousel?

Answer №1

Similar questions

FireFox - Dynamic Blinking Divs on Hover

Finding the vertical dimension of an embedded HTML element

Veracode Scan finds vulnerability in jQuery html method with Improper Neutralization of Script-Related HTML Tags in a Web Page error

Error: autocomplete is not defined for this element

Perform an operation in JQuery after a different operation has been completed

What is the reason behind the removal of the "disabled" attribute when setting the "disabled" property to false?

Introduction to Angular controller binding for beginners

Directing communication in AngularJS: From controller to directive

Retrieve the URL string from HTML content with regular expressions

Sorting images can be quite a challenge

Techniques for transferring PHP print_r arrays to Javascript

Create styles that reveal a div element upon hovering over a nested anchor link

Incorporating a new button into the edit menu of a SharePoint 2010 webpart

Send a POST request including an audio file and then navigate to a different page

Heroku is unable to locate a module

What is the best way to change the radio button selection using .val() in jQuery?

Troubleshooting jQuery's Fading Effect

Flow - secure actions to ensure type safety

Tips on using htmlspecialchars in combination with a href:To safely include links in

My goal is to adjust the height of every text box on the page