The automatic sliding feature stops functioning once the controls have been clicked

When using the boxslider, the autosliding feature functions correctly initially. However, after manually clicking on the left and right arrow controls, the auto sliding stops working. See below for my code snippet:

<ul id="slider-assocoates">
    <li><a href="#" target="_blank"><img src="images/abcdef.png" /></a>
    </li>
     <li><a href="#" target="_blank"><img src="images/abc.png" /></a>
     </li>
</ul>
    <nav>
        <a href="#" id="go-prev-assocoates" class="left-arrow">Prev</a>
        <a href="#" id='go-next-assocoates' class="right-arrow">Next</a>
    </nav>

$(function(){
  var slider = $('#slider-assocoates').bxSlider({
    controls: false,
    auto: true,
    pause: 6000
  });

  $('#go-prev-assocoates').click(function(){
    slider.goToPreviousSlide();
    return false;
  });

  $('#go-next-assocoates').click(function(){
    slider.goToNextSlide();
    return false;
  });

Answer №1

Here's a suggestion to help resolve your issue, as I encountered the same problem in one of my projects:

slider.startShow();

Answer №2

let clickNextAction = function(event){
            // check if automatic display is active and pause it
            let flag = 0; 
            if (slider.settings.auto) flag = 1;
            if(flag == 1) element.stopAuto();
            element.goToNextSlide();
            if(flag == 1) element.startAuto();
            event.preventDefault();
        }

Answer №3

Give this a try

$(function(){
    var carousel = $('#carousel-members').bxSlider({
        controls: false,
        auto: true,
        pause: 6000
    });

    $('#go-prev-members a, #go-next-members a').click(function(e){
        var index = $(this).index();
        carousel.goToSlide(index);
        carousel.stopAuto();
        restartTimer=setTimeout(function(){
            carousel.startAuto();
        },500);
        return false;
    });

This method has been successful for me.

Answer №4

For those using bxSlider 4.1.1, here is a simple and elegant solution to fix the issue. By making edits to the jquery.bxslider.js file and adding the two lines below, you can then compress the code using jscompressor. This will ensure that the slider works seamlessly without any additional workarounds needed. Special thanks to the Freelancerrs for providing this helpful solution!

....

var clickNextBind = function(e){
    // if auto show is running, stop it
    if (slider.settings.auto) el.stopAuto();


    el.goToNextSlide();
    e.preventDefault();

    el.startAuto();   // ---------------JUST ADD THIS LINE

}

/**
 * Click prev binding
 *
 * @param e (event) 
 *  - DOM event object
 */
var clickPrevBind = function(e){
    // if auto show is running, stop it
    if (slider.settings.auto) el.stopAuto(); 
    el.goToPrevSlide();
    e.preventDefault();

    el.startAuto();   // ---------------JUST ADD THIS LINE

}

...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of Bootstrap's JavaScript is dependent on the presence of jQuery - Reactjs framework

When attempting to combine bootstrap with reactjs, I encountered an issue with importing Bootstrap.js It seems that Bootstrap's JavaScript requires jQuery Below are some of the import statements I have tried: import $ from 'jquery'; imp ...

One page experiences issues loading CSS due to MIME type, while a different page has no problem with it

I'm facing an issue with my express app that renders Mustache templates. The problem is related to the CSS not applying on one of the routes due to it being of MIME type text/html (as mentioned in the Chrome console). This is how I set up my express ...

What is the best way to ensure that my table cell dynamically adjusts to fit its contents in Bootstrap 3?

Currently, I am retrieving data from a MySQL database and displaying it in a table. However, I am having trouble getting the cell width to adjust to fit the content properly. I have attempted setting the width property of the table, but unfortunately, it ...

Using jQuery Ajax to Retrieve Inner Text from Elements

Looking for a solution with PHP file output like this: <div id="title">Add Us On Myspace!</div><img id="image" src="http://i39.tinypic.com/67jybs.png" alt="Add Us On Myspace!" /> The code to retrieve and display this is as follows... $ ...

Could the `<script src="show.js"></script>` code pose a threat?

Upon delivering a webpage, a software engineer included the subsequent line of code towards the end: <script src="show.js"></script> We are uncertain if adding this code to our webpage poses any risks. What could be the legitimate reason behi ...

How to set a default value different from the available options using jQuery

<select id="itemDepartment"> <option value="1">Computer Accessories</option> <option value="2">Laptop</option> </select> the default value in the drop-down list can be set using the selected="selected" attribute. ...

"Enhancing Shopify experience by seamlessly adding products without the need for page refresh

Welcome to my first post on this platform. I recently implemented a list of products in my Shopify mini cart, and although the products are successfully added to the cart, clicking "add to cart" redirects me to the cart page. Is there a way to add products ...

(CSS/HTML) How to hover over an "li" element without affecting the text inside the "li" element

Looking for some assistance. I've created an unordered list with list items and applied the following CSS to it: li { opacity: 0.5; } li:hover{ opacity: 1; } The issue arises when I hover over a pixel from within a word in "li" - it stops hovering ...

What steps can I take to mimic a pen-like behavior for my cursor on my sketching website project?

My goal is to create a 16x16 grid with a white background, where each grid item changes color when the mouse is pressed and moved over it, similar to paint. I have written a script to achieve this: let gridContainer = document.getElementById('grid-con ...

"Aligning content vertically within table cells based on the content type: image

I am facing an issue with vertically centering content, especially when there is no image and only text like "Antec Leyden b.v." It does not appear in the middle. https://i.sstatic.net/mzsHe.png I have experimented with various codes, but all yield the s ...

Scroll through the page effortlessly

Is there a way to make a specific div on my page automatically start scrolling down and then back up when the page loads? This is the JavaScript code I have written: <script> function scrollDownAndUp(speed) { $('#scrollingcontent').anim ...

Every time I load the script, my global variables reset. How can I prevent this constant refreshing?

As I work on completing a prototype for my system, I am facing an issue with global variables reinitializing every time the script reloads. Currently, I am not using localStorage and simply need a quick solution to prevent the variables and functions from ...

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

Retrieve PHP variable from a PHP CSS file

I'm facing an issue where I am unable to retrieve a PHP variable from a CSS file that is loaded in this manner from my index.php: <link href="css/style.php" rel="stylesheet"> Within the style.php file, the code looks like this: <?php heade ...

What is the best way to retrieve the chosen ID from a list box and pass it to a getJSON function within an ASP.Net MVC application?

I'm facing a challenge with my list box setup... @Html.ListBoxFor(model => model.SelectedCalendarId, Model.PeriodList) After setting up a jQuery call to my controller with a hardcoded value... var calId = 12; $.getJSON("/Publishing/GetLockState1 ...

Implementing Multiple Shared Footers in Rails 3

Looking for a solution to display unique footers in Rails? For instance, displaying one footer on the homepage and another footer on the rest of the site. Has anyone successfully implemented this before? I was considering using an if statement based on th ...

How can we utilize $interval in Angular without any initial delay?

I have created a function that animates an object on the screen as follows: $interval(function() { $('#cloudLeftToRight').animate({ left: '+=250%', }, 7000, function() { $('#cloudLeftToRight').removeAt ...

How to implement a date mask using SignalR, Knockout, and EntityFramework in a classic ASPX webforms environment (not MVC)

My current page.html setup is mostly functional, but I am experiencing some anomalies with the way dates are displayed: 2013-05-24T13:09:40.927 2013-05-24T13:09:40.927 10> •2013-05-24T13:11:32.823 2013-05-24T13:11:32.823 100> • ...

Tips on adjusting the spacing between two text input fields in bootstrap

Require horizontal space between the text input fields in bootstrap. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="col-md-12"> ...

The placement of an HTML canvas within a webpage

I've been experimenting with a canvas script that resembles dottydots. Everything is functioning correctly, but I'm looking to adjust its position on the canvas. I attempted using position:absolute, which did move the canvas visually, but the wor ...