Creating a Jquery slider animation: step-by-step guide

I tried implementing a code example in jQuery, but I am struggling with achieving smooth transitions in my slides. The changes are happening too abruptly for my taste. How can I create animations that occur during the transition, rather than after it?

function MultipleSlider() {
  $('.carosel-control-right').click(function() {
    $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
  });
  $('.carosel-control-left').click(function() {
    $(this).blur();
    $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
  });
}
MultipleSlider();
$(function() {
  $('.glyphicon-chevron-right').each(function() {
    var button = $(this);
    setInterval(function() {
      button.click();
    }, 5000);
  });
});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid p-0 text-center">
  <div class="container position-relative p-0">
    <div id="carosel" class="carosel" id="carosel1" data-interval="500">
      <div class="carosel-inner">
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide1"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur adipiscingd </p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:green">Lifestyle <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide2"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, ctetur adipiscing</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:darkblue">Sport <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide3"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, ctetur adipiscing</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:purple">Music <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide4"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur adipiscing </p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:green">Lifestyle <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide5"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur a</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:orange">Business <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
      </div>
    </div>
    <a class="carosel-control fa fa-angle-left carosel-control-left glyphicon glyphicon-chevron-left"></a>
    <a class="carosel-control fa fa-angle-right carosel-control-right glyphicon glyphicon-chevron-right" id="nextMultipleSlider"></a>
  </div>
</div>

jquerycss

Answer №1

Discover more about fadeIn/fadeOut

function MultipleSlider() {
  $('.carosel-control-right').click(function() {
    const $parent = $(this).parent(); // cache the parent
    $parent.fadeOut(function() { 
      $parent.find('.carosel-item').first().insertAfter($parent.find('.carosel-item').last())
      $parent.fadeIn(); 
    })      
  })
  $('.carosel-control-left').click(function() {
    $(this).blur();
    $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
  });
}
MultipleSlider();
$(function() {
  $('.glyphicon-chevron-right').each(function() {
    var button = $(this);
    setInterval(function() {
      button.click();
    }, 5000);
  });
});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid p-0 text-center">
  <div class="container position-relative p-0">
    <div id="carosel" class="carosel" id="carosel1" data-interval="500">
      <div class="carosel-inner">
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide1"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur adipiscingd </p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:green">Lifestyle <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide2"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, ctetur adipiscing</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:darkblue">Sport <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide3"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, ctetur adipiscing</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:purple">Music <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide4"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur adipiscing </p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:green">Lifestyle <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide5"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur a</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:orange">Business <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
      </div>
    </div>
    <a class="carosel-control fa fa-angle-left carosel-control-left glyphicon glyphicon-chevron-left"></a>
    <a class="carosel-control fa fa-angle-right carosel-control-right glyphicon glyphicon-chevron-right" id="nextMultipleSlider"></a>
  </div>
</div>

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

What causes the image to not appear at the center bottom of the page when using IE for loading?

Why does the loading image not appear at the center bottom of the page in IE? This function loads content when the page is loaded and also loads content when scrolled to the bottom. When you load the page index.php, you will see the loading image at the ...

javascriptphpjqueryhtmlcss

The CSS background fails to expand to the entire height of the element

I'm encountering an issue where an element with 100% height is extending beyond its boundaries when there are multiple blocks. For a demonstration, you can refer to this jsfiddle example: http://jsfiddle.net/yPqKa/ Any suggestions on how to resolve ...

htmlcss

Enhance your view of the iFrame's CONTENT by zooming in

I'm attempting to magnify (without altering the dimensions) an iFrame containing a SWF file. <iframe src="http://ray.eltania.net/TEST/swf-play/swf/testMotion.swf" width="600px" height="500px" frameBorder="0"></iframe> http://jsfiddle.net ...

jqueryhtmlflashzooming

The back button on an Angular JS application should display a confirmation dialog when pressed

I am currently working on an AngularJS mobile app that consists of various modules. One of my requirements is to access the device's back button within the application, and I also need a dialog with "OK" and "Cancel" options. Clicking on "OK" should ...

javascriptjqueryangularjsionic-frameworkmodal-dialog

Avoid letting words be separated

My question involves HTML code <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">Lorem Ipsum</div> When I view this on a mobile device, the text appears as follows: Lorem Ip- sum I ...

htmlcss

Is it possible to resize an object using JavaScript?

Is it possible to change the size of an object when loading specific data by clicking on navigation? <object id="box" width="250" height="250" data=""></object> Although the JS code loads the data, it does not change the size. document.getEl ...

javascriptjqueryhtmlcss

Issue encountered while attempting to load bootstrap in NodeJS

I encountered an error while running my jasmine test case in node. The error message says that TypeError: $(...).modal is not a function. This error pertains to a modal dialog, which is essentially a bootstrap component. To address this issue, I attempted ...

javascriptjquerynode.jstwitter-bootstrapnpm

Utilizing JavaScript to add classes to a parent element

When a user clicks on a link, I want to add a class to the <li> tag that wraps around it. Here is an example: <ul> <li><a href="#">Just an Example</a></li> </ul> How can I target the <li> element enclosing ...

javascriptjqueryhtml

Tips on making a fresh form appear during the registration process

After clicking on a submit button labeled as "continue" within a form, a new form will appear for you to complete in order to continue the registration process. ...

javascriptjqueryhtml

Is it possible for a div with fixed position to still have scrolling functionality

My fixed positioned div (#stoerer) appears to be moving while scrolling, although it is just an optical illusion. Check out this visual explanation: view gif for clarification Below is the code snippet in question: <div id="stoerer"> <button ...

javascriptjqueryhtmlcsssass

Incorporating SCSS into HTML files when they are situated at the same hierarchy

I have <h1 class='title home'> My Title </h1>, and to apply styles I can use the following CSS: .title { font-size: 1.95em; } .title .home { color: black; } While this method works, I a ...

htmlcsssass

CSS Dropdown Menu Malfunctioning

I recently created a navigation bar using some online tutorials, and everything seems to be working fine except for the drop-down menu. I've been struggling with it for hours and can't seem to find a solution. Any help would be greatly appreciate ...

csshtmldrop-down-menu

Selections made from the dropdown menu will automatically generate additional fields in the

The code I'm working with is too lengthy to post in its entirety, so here is the JSFiddle link instead: https://jsfiddle.net/c0ffee/pew9f0oc/1/ My specific issue pertains to this screenshot: Upon clicking on the dropdown menu, the options are visib ...

htmljquerycss

Bullet points colliding with one another

Is there a way to display an unordered list with list items in two rows and multiple columns without the bullet points overlapping? I have tried adjusting margins, but is there a more elegant solution to this issue? The requirement is to maintain the bul ...

htmlcssflexbox

Utilizing a large logo alongside the NavBar in Bootstrap

Trying to design a sleek navbar that is proportional to the logo size, while also allowing for additional content below it. The jsFiddle link below showcases the current setup. The black line signifies the bottom of the nav bar, which has expanded to matc ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using jQuery to Organize JSON Tables

I'm in a bit of a bind... I'm in need of sorting tables from a list of formulas. I've extracted 3 parameters from JSON files and created formulas, but now I need to sort this list of formulas. JSON files: <body> <script> $ ...

jqueryjsonajaxapidom

Pass an array using AJAX to my Python function within a Django framework

I am attempting to pass an array to my python function within views.py, but I am encountering issues. It consistently crashes with a keyError because it does not recognize the data from js. Code: Python function in views.py: def cargar_datos_csv(request ...

javascriptpythonjquerydjangoajax

Trouble with connecting CSS files

Can anyone explain why my CSS file isn't linking properly when the HTML file is located in a subfolder within the directory that contains both the CSS and HTML folders? I attempted to remove the main folder path from the link, but the issue still pers ...

htmlcssfilefile-link

Restrict the option to select checkboxes

Can anyone help with limiting checkbox selection? This is the code I currently have... foreach($res as $res) echo '<div class="ediv"><input type="checkbox" class="echeck" name="pr[]" value="'.trim($res['product']).'" ...

javascriptphpjquery

What could be causing my Chrome extension's AJAX calls to behave synchronously?

Recently, I've been experimenting with implementing AJAX in a Chrome extension. Within my content script, the goal is to inject some HTML into an existing page. I've attempted using JQuery.get, JQuery.load, and ng-include. To my surprise, all ...

jqueryajaxangularjsgoogle-chrome-extensioncontent-script