What are the ways to prevent the slider from automatically moving?

I have a carousel/slider that is automatically moving, but I want to stop it so that it only moves when the navigation arrows are clicked. Here is a picture of the slider https://ibb.co/HPr9rJR. Currently, it is moving on its own to the left side, but I would like it to only move by clicking on the "<", ">" icons. The code for the slider can be found on this CodePen link:

codepen.io/decibeldesign/details/bMrQKN

Here is an excerpt of the code used:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs   
          /twitter-bootstrap/4.0.0/css/bootstrap.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1
          /jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap 
        /4.0.0/js/bootstrap.min.js"></script>

<div class="col-md-10 col-xs-8 my-5 text-center5">
    <div class="row d-flex align-items-center">
        <div class="col-1 d-flex align-items-center justify-content-center">
            <a href="#carouselExampleIndicators" role="button" data-slide="prev">
                <div class="carousel-nav-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 50px;">
                        <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z"/>
                    </svg>
                </div>
            </a>
        </div>
        <div class="col-6">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div style="" class="col-12 col-md d-flex align-items-center justify-content-center">
                                <div class="col-md-2 col-xs-12 upcoming-btn">
                                    <span href="" class="btn btn-success btn-lg dashboard-icon" style="width: 200px; height: 150px;">
                                        <p style="padding-top: 15px; font-size: 25px; font-weight: bold;">subject</p>
                                        <p style="font-size: 25px; font-weight: bold;">date</p>
                                        <p style="font-size: 25px; font-weight: bold;">Upcoming</p>
                                    </span>
                                </div>
                            </div>
                            <div style="" class="col-12 col-md d-flex align-items-center justify-content-center">
                                <div class="col-md-2 col-xs-12 upcoming-btn">
                                    ...
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        ...
                    </div>
                </div>
            </div>
        </div>
         ...
    </div>                         
</div>
htmlcssbootstrap-4slidercarousel

Answer №1

make sure to include the following snippet of code in your JavaScript file:

$(document).ready(function() {      
    $('.carousel').carousel('pause');
});

Answer №2

Hey there, a simple suggestion for you would be to include this line:

data-interval="false"

Within your element. Just a friendly reminder to always refer back to the documentation in case of any doubts.

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

Inject a <div> element into a table row upon clicking a button using jQuery and PHP

I am faced with an issue regarding displaying pdf reports within specific table rows. The scenario involves a table containing folder paths and buttons in each row. Upon clicking the button, the path is sent to a sequence of PHP files (ajax.php, ajax2.php, ...

phphtmljquery

Getting the value of a checkbox from a MySQL database

Is there a way to print the entire contents of a textarea without any scroll bars, so that all text entered is visible? Currently, only the last few lines are showing when printed. I need the textarea to automatically resize for printing. <textarea cla ...

javascripthtmlcss

Angular formarray radio buttons not toggling properly in the UI

I have a FormArray that iterates through several test steps. Next to each test step, I am trying to include a radio button group with PASS or FAIL options. When I choose a radio option, it works fine. However, when I select PASS or FAIL on a different row, ...

angularbootstrap-4

Utilize Pseudo Elements for Designing a Unique Background Overlay

I am aiming to create a div with a customizable background, and then utilize a pseudo element to generate a semi-transparent white overlay that will lighten the background of the div. The crucial requirement is for the "overlay" to appear beneath the conte ...

htmlcsspseudo-element

"Error" - The web service call cannot be processed as the parameter value for 'name' is missing

When using Ajax to call a server-side method, I encountered an error message: {"Message":"Invalid web service call, missing value for parameter: \u0027name\u0027.","StackTrace":" at System.Web.Script.Services.WebServiceMethodData.CallMethod(O ...

javascriptc#jqueryhtmlajax

Executing individual if/each statements to choose specific divs and modify the position of their background images separately

I am currently faced with the challenge of relocating a background image within a div based on the content of a span. The complication arises from the fact that multiple divs share the same class and cannot be individually modified. For instance, each ce ...

javascriptjqueryhtmlcss

Struggling with aligning images in the center of a square container

Currently revamping my photography website and working on a simple slider to showcase some of my photos. Struggling with aligning the images in divs with padding all around while keeping them centered. I want to replicate the look of my photos on Instagram ...

csshtmlsassslick.js

Strange audio issues encountered in Internet Explorer 11

Incorporating HTML5 Audio into a website project for background playback during specific events is my current endeavor. An unusual occurrence has been identified with Internet Explorer failing to load audio from one of my web domains. To illustrate this i ...

javascripthtmlaudio

Mystery factor triggering the appearance of scrollbar as the window is resized to a specific width threshold

I'm facing a rather peculiar problem. I'm currently in the process of creating a webpage tailored for an iPhone screen resolution of: width: 640; height: 960; However, there seems to be a mysterious hidden element that is extending the width of ...

iphonehtmlcss

Preventing div contents from shrinking with changing screen sizes

I am currently working on creating a portfolio website similar to this one. Check out the Website Here Typically, when the screen size is reduced to less than half of the full width, the content of a website tends to be hidden rather than shrinking. Howe ...

css

Guide on Creating a Popup Window When the User's Cursor Moves Beyond the Webpage Boundary

Imagine you're browsing a webpage and as you move your mouse towards the "back" button, a window pops up within the webpage area, displaying important information. This is a clever way to grab the user's attention before they leave the website. B ...

javascriptjqueryhtmlcss

Is it possible for a malicious party to modify the src attribute within an iframe?

My website incorporates IFrame on a page, loading different pages based on server-side logic. As such, the source code appears like this when viewed: <iframe src="DeterminedOnServerSide.aspx" id="myFrame"> </iframe> I am curious if there is a ...

asp.nethtmlsecurity

Centering an image on a webpage using CSS

Here is the code I am using for displaying my image: return <div class="imgContainer"><img src={broomAndText} alt="broomAndText" /></div> In my css file, I have included the following styling: .imgContainer { tex ...

htmlcssreactjs

Attempting to link two JavaScript files, however, only one of them is functioning correctly

I'm currently experiencing an issue with my HTML page that involves calling two JS files for two different image sliders on the same website page. One slider works perfectly fine while the other does not. I'm confused as to whether it's perm ...

javascripthtmlcss

Dynamic Sizing of Elements + Adaptive Text Overlay

There were 2 obstacles I encountered when trying to create an image-based drop-down menu : No matter how much effort I put in, I couldn't figure out how to make a flexed element inside a container maintain the same height as the adjacent element. [ ...

javascripthtmlcssimagelayout

Is it permissible to assign the same element as a child to multiple parent elements in jQuery?

Imagine you have the following HTML structure: <div id="first"></div> <div id="second"></div> Now, if you use JavaScript and JQuery to perform the following actions: var $child = $("<span id='child'>Hello</span ...

javascriptjqueryhtml

Guide to setting up npm pug-php-filter in conjunction with gulp

I'm having trouble setting up pug-php-filter (https://www.npmjs.com/package/pug-php-filter) with gulp in order to enable PHP usage in my Pug files. Any assistance would be greatly appreciated. ...

phphtmlnpmgulppug

How can I use an ajax get request to retrieve a css file from a webpage and then customize the default styles in my program?

Here is my current code snippet: HTML: <h1>Test Message</h1> Default CSS: h1{ font-size: 24px; } Jquery: $(document).ready(function(req, res){ $.ajax({ url:"example.com/test.css", type : "GET", crossDomain ...

jquerycssajax

The Express JS is having trouble serving the static CSS files through the router

Currently, I am encountering this issue in a larger project, so I have created a simplified version to explain it more clearly. The Tree Structure of my project is outlined below: demo |____admin | |____admin.js |____node_modules | |____static | ...

cssnode.jsexpressroutes

I am having trouble selecting a search suggestion using selenium. The website does not allow me to simply click on submit, it requires me to make a selection

Streamlining the search for temporary apartments has become a priority for me, however, one website's drop-down list requirement is hindering my progress. I must select an option from the dropdown menu before being able to submit my search query, rega ...

pythonhtmlseleniumweb-scraping