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

Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

I am encountering a problem with the hover effect. I have 3 child div's structured as follows: <div class="parent"> <div class="child1">A</div> <div class="child2">B</div> <div class="child3">C</div ...

htmlcss

Can IE(7?) cause distortion of backgrounds from sprites?

This task is giving me a headache. We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparen ...

cssinternet-explorerbackground-imagesprite

Using jQuery to create a checkbox that functions like a radio button

In my code, I have a bunch of checkbox elements placed in different containers as demonstrated below: $("input:checkbox").click(function() { var url = "http://example.com/results?&" var flag = false; var $box = $(this); var $facet = $box.val ...

javascriptjqueryhtml

Strange behavior observed with Jquery Ajax

After spending countless days on this issue, I am still unable to figure out why it's not working. Can someone please take a look and assist me? index.php <form id = "update_status" method = "POST"> <textarea id="sha ...

phpjqueryajax

Utilizing CSS grid layouts to ensure images expand to fit the dimensions of the designated column and

I am currently working with a CSS grid layout that is displaying as follows: .image__gallery-grid { max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2.5rem; dis ...

htmlcss

What is the most effective method for attaching a jQuery click event to every anchor tag within each row of a table?

Displayed here is a grid (basic html table) showcasing users with the option to delete a specific user by clicking on the delete link. My typical approach involves: <% foreach (var user in Model.Users) {%> <tr > <td align="right"><% ...

javascriptjquery

Tips for capturing text input from a Quill rich text editor div

My attempt to retrieve the content entered in Quill editor's editor div using jQuery codes is not proving successful. Although it works for other text inputs, it fails to do so for the editor div. Below is a demonstration of the issue: $(function() ...

javascriptjqueryhtmlquil

When aligning divs at the center, they may not all be perfectly in a straight

My goal is to align 4 div boxes in a vertical line using the translate method typically used for centering objects on a webpage. Here is the code snippet I have utilized: link .body-component { position: relative; margin: 10px; color: #000; disp ...

htmlcss

Tips for creating a textarea element that resembles regular text format

I am working on creating an HTML list that allows users to edit items directly on the page and navigate through them using familiar keystrokes and features found in word processing applications. I envision something similar to the functionality of To achi ...

javascripthtmlcss

Tips for implementing a hover effect on the background color of a Bootstrap navbar

I am having trouble changing the background color of links and social media icons when hovering over them. I've tried multiple solutions found through searching, but none seem to work for me. Could someone please assist me with this issue? Thank you! ...

htmlcsstwitter-bootstrap-3bootstrap-4

What is the best way to ensure that my text always aligns perfectly to the end of the line?

I've been struggling to create a column layout where the text perfectly aligns with the end of the line, but so far, I haven't had any success. Despite my efforts to find a solution online, I have come up empty-handed. What I'm aiming for i ...

htmlcssbootstrap-4less

What is the best way to eliminate HTML unicode content from the final item in a continuously changing list?

li:after{ content:"\00b6"; } <ol> <li>banana</li> <li>orange</li> <li class="last-class">apple</li> </ol> I am currently working on a dynamic list where the number of <li> tags varies over t ...

htmlcssunicode

Utilizing React and Material-UI to Enhance Badge Functionality

I am exploring ways to display a badge icon when a component has attached notes. I have experimented with three different methods and interestingly, the results are consistent across all of them. Which approach do you think is the most efficient for achiev ...

javascripthtmlcssreactjsmaterial-ui

format.js or format.html: Understanding the Differences in Rails

I am looking to incorporate AJAX to load a partial in my create action. Most tutorials suggest using the line format.js within the respond_to block and creating a create.js.erb file. However, I have some code in my create action which needs to be executed. ...

ajaxruby-on-rails-3jquery

injecting javascript dynamically using jquery

I am attempting to conditionally load a script in the case that the browser being used is IE8. To achieve this, I have employed jQuery's .getScript function as it allows me to execute certain actions after the script has been loaded. The issue lies in ...

javascriptjquery

Why are the radio buttons not aligned with the text in the center?

Currently, I am in the process of building a form that includes radio buttons. However, I've encountered an issue where the text next to the radio buttons appears on a different level than the buttons themselves. How can I go about fixing this partic ...

javascripthtmlcss

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

htmlcss

Tips for creating a consistently positioned div element, regardless of the screen size

Having trouble positioning two bars with green or blue filling in the bottom right corner? They keep moving around and not staying in place regardless of screen size. Check out how they are off-screen here Below is the CSS-Styling + HTML code: .eleme ...

htmlcss

"Utilizing the power of ng-click to target specific child

I am facing an issue with my owl carousel where events are not firing on cloned items. In search of a solution, I came across a suggestion from Stack Overflow to move the event handler from the direct target to its parent element: Original code snippet: ...

javascriptjqueryangularjs

Triggering transitionend event once with an added if condition

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermo ...

javascriptjquerycsscss-transitions