Creating an automatic image carousel using a combination of Jquery, Javascript, and CSS

I have been working on creating a slider using jQuery and javascript, but I am facing some issues with the autoplay functionality and the next-previous buttons. This slider is intended for displaying images as a title indicates. Can anyone assist me with implementing left/right side animation?

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

$('.active').removeClass('active').addClass('oldActive');    
        if ( $('.oldActive').is(':last-child')) 
        {
            $('.sp').first().addClass('active');
        }
        else
        {
            $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    setTimeout('.active', 1000);
    $('.sp').fadeOut();
    $('.active').fadeIn();

You can find the remaining part of the code in the following jsfiddle link: https://jsfiddle.net/ghy14p0f/1/

javascriptjqueryhtmlcss

Answer №1

To easily create a slide effect, you can incorporate the jquery-ui module, which allows for various effects and easing options. I have included the necessary code below and set up the transitions for you. Additionally, in your fiddle, it seems you forgot to specify the use of jQuery, which would explain why it wasn't working. I made minimal modifications, mainly focusing on changing the fadeout/fadein to create smoother transitions. Good luck with your project!

$(document).ready(function() {
  $('.sp').first().addClass('active');
  $('.sp').hide();
  $('.active').show();


  $('#button-next').click(function() {
    $('.active')
      .removeClass('active')
      .addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
      $('.sp').first().addClass('active');
    } else {
      $('.oldActive').next().addClass('active');
    }
    $('.oldActive').hide("slide", { direction: "right" }, 600).removeClass('oldActive');
    $('.active').delay(400).show("slide", { direction: "left" }, 600);


  });

  $('#button-previous').click(function() {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':first-child')) {
      $('.sp').last().addClass('active');
    } else {
      $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').hide("slide", { direction: "left" }, 600).removeClass('oldActive');
    $('.active').delay(400).show("slide", { direction: "right" }, 600);
  });

});
#slider-wrapper {
  width: 500px;
  height: 200px;
}

#slider {
  width: 500px;
  height: 200px;
  position: relative;
}

.sp {
  width: 500px;
  height: 200px;
  position: absolute;
}
img {
  height: 200px;
}

#nav {
  margin-top: 20px;
  width: 100%;
}

#button-previous {
  border: 1px dotted blue;
  background-color: #ccc;
  float: left;
}

#button-next {
  border: 1px dotted blue;
  background-color: #ccc;
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="slider-wrapper">
  <div id="slider">
    <div class="sp">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Bianco_e_Rosso_(Croce)_e_Rosso.png">
      First Image
    </div>
    <div class="sp">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/600px_Rosso_e_Giallo.PNG">
      Second Image
    </div>
    <div class="sp">
      <img src="https://upload.wikimedia.org/wikipedia/en/4/4c/Flag_of_Sweden.svg">
      Third Image
    </div>
  </div>

</div>

<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</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

The states of both components are only being updated once the second event call is triggered within React

I am currently working with 2 functions in my project. One function is triggered when I type something into the search input, while the other one is called upon selecting a category. The initial values for the search and selectedCategories variables are an ...

javascriptreactjsreact-hooksreact-component

The background image does not appear on the animated div until the browser window is resized

Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...

jquerycssbackground-imagevisibilitywindow-resize

Is it permissible for me to incorporate a package from the dependencies listed in the package-lock.json file into my

I'm looking to incorporate date-fns into my project. I currently have react-datepicker, which also uses date-fns. Can I simply utilize date-fns from react-datepicker, or do I need to install it separately in my project? ...

javascriptnpmnpm-installpackage.jsonpackage-lock.json

An issue has been identified where the Export to Excel and PDF functionality is not functioning properly within a Datatable after applying a

I am using multiple select option filtering with ajax, jQuery, and PHP in a datatable. The records are being filtered correctly, but after changing the select option, the Export to Excel/ PDF functionality is not working properly. Note:- (1) It always do ...

javascriptphpjqueryajaxdatatable

Learn the process of adding values to HTML forms within ExpressJS

I am facing a challenge in injecting Javascript variable values into HTML forms on an Expression JS server. I am unsure about how to solve this issue. All I want to do is insert the values of x, y, and res into the forms with the IDs 'firstvalue&apos ...

javascripthtmlnode.jsexpress

Could not find yarn command even after installation with npm

Following the guidelines for yarn v2 installation, I tried to install using npm install -g yarn. I executed sudo npm install -g yarn on Ubuntu 20.04. However, after running this command, it returned "command not found." ❯ sudo npm install -g yarn > ...

javascriptnode.jsubuntunpmhadoop-yarn

I encountered an issue in reactjs where I received the error message: TypeError: this.state.coords.map is not functioning properly

Here is the code snippet I wrote: import React, { Component } from 'react'; class LocationApp extends Component { constructor(props){ super(props) this.state = { coords:[], error:[], } } ...

javascriptarraysreactjsfunctiondictionary

Is jQuery capable of appropriately escaping my quotes?

Currently, I am utilizing $.cookie() to retrieve all the values from a cookie which are stored in JSON format: var properties = $.cookie('params'); The output of properties is: {"distinct_id": "13f97d6600b42e-000e6293c-6b1b2e75-232800-13f97d66 ...

javascriptjqueryjsonpost

Incorporating a loading animation with an AJAX call

I've come across various solutions to this issue, one of the most enlightening being a response on Stack Overflow suggesting to "display it as soon as you initiate the AJAX call" and then "hide the image once the request is complete." But how would I ...

javascriptjqueryajax

Transferring information from various HTML forms using JQuery's ajax functionality

Hello there! I have recently started learning how to use jQuery AJAX for file uploads. Currently, I am working with a simple HTML form and including JavaScript/jQuery code within it to make an AJAX request. <!DOCTYPE HTML> <html> <head> ...

phpjqueryhtmlajax

The default expansion behavior of Google Material's ExpansionPanel for ReactJS is not working as expected

Currently, I am in the process of developing a ReactJS application that utilizes Google's Material-UI. Within this project, there is a child class that gets displayed within a Grid once a search has been submitted. Depending on the type of search con ...

javascriptreactjsmaterial-ui

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

cssreactjstabsthemesmaterial-ui

Switch the visibility of an HTML input styled as a "spinner"

I have managed to create a CSS-based method for toggling the visibility of span or input elements depending on whether a radio button is checked. I got inspired by this insightful question on Stack Overflow. However, I encountered an issue where this togg ...

jquerycssjquery-uispinner

Encountering a problem when trying to set the value in the controller and receiving unexpected output from the console

Attempting to assign a value to an object and show it in the view, but encountering an issue. When setting the vm.order.info.when to 'Any Value' and logging the vm.order.info, the value appears correct at first glance. However, upon inspecting th ...

javascriptangularjs

determining the quantity of dates

Is there a way to calculate the number of a specific day of the week occurring in a month using AngularJS? For example, how can I determine the count of Saturdays in a given month? Thank you. Here is the code snippet I have been working on: <!doctype ...

javascriptangularjsangularjs-ng-repeat

injecting a variable from the configuration service into a TypeScript decorator

I am interested in setting up a scheduled task for my NestJs application to run at regular intervals. I found information on how to use intervals in the NestJs documentation. Since my application uses configuration files, I want to keep the interval value ...

javascriptnode.jstypescriptnestjs

AngularJS faces issue with view not reflecting changes made to model

A web-based game I am developing lets players bid on cards and trade them with one another. The technology stack for this application includes Node, Express, MongoDB, and Angular. The player avatars and names, along with their connection status, are displ ...

javascriptangularjsnode.jsexpress

Tips for implementing Angular 6 Route Authentication Guards on both Parent and Child Routes in all Routes

Exploring the Implementation of Angular 6 Route Auth Guards Across Root and Child Routes ...

javascriptangulartypescriptangular6angular-router

Is there a way to modify AJAX response HTML and seamlessly proceed with replacement using jQuery?

I am working on an AJAX function that retrieves new HTML content and updates the form data in response.html. However, there is a specific attribute that needs to be modified before the replacement can occur. Despite my best efforts, I have been struggling ...

javascriptjqueryhtmlajax

Executing a class function within the ajax success method

I am attempting to set a variable inside the success callback of an AJAX call. I understand that in order to assign the value, I need to use a callback function. However, I want that function to be within the class. Is it feasible to implement something li ...

javascriptajax