I'm looking to enhance my jQuery image and text slider by incorporating Left/Right Arrow (Next/Previous) functionality. How can I achieve this

Here's what I've got so far: Link to JS Fiddle

Current functionality includes text links that make corresponding text/image fade in. Looking to add left and right arrow functionality to navigate between slides by fading in/out. When on the last slide and right arrow clicked, should loop back to the first slide and vice-versa.

All suggestions or critiques of the current code are welcome. Thank you!

HTML:


        <!-- Code snippet for HTML goes here -->

Javascript:


        // Javascript code snippet will go here

CSS:


        /* CSS styling rules to be inserted here */
javascriptjqueryhtmlcss

Answer №1

$(document).ready(function() {
    const totalSlides = $(".slides").length;
    
    $(".slides").click(function(){
        $(this).fadeOut("fast").removeClass("active");
        $(this).next().fadeIn("slow").addClass("active");
        
        if($(".slides:last-child")){
            $(".slides:first-child").fadeIn("slow").addClass("active");
        }
    });
});

To ensure smooth transition between slides, this code keeps track of the total number of slides and automatically loops back to the first slide when reaching the end. By clicking on a slide, it fades out and transitions to the next one, ensuring a continuous slideshow experience for users.

Answer №2

Check out the completed Fiddle here: http://jsfiddle.net/bpgabrielli/vpfsnhmh/1/

Behold the ultimate arrow script presented below:

<!-- Next Arrow Javascript -->
<script type="text/javascript">
$(document).ready(function() {
    $("#right_arrow").click(function(){
        var nextSlide = $('.slidep.opaque, .slidei.opaque').next();
        var nextControl = $('.slidec.hvr-glow-selected').next();
        if($(".slidei.opaque").is($(".slidei:last"))) {
            $('.slidep.opaque, .slidei.opaque').removeClass("opaque");
            $('.slidec.hvr-glow-selected').removeClass("hvr-glow-selected");
            $('.slidep:first, .slidei:first').addClass("opaque");
            $('.slidec:first').addClass("hvr-glow-selected");
        }
        else {
            $('.slidep.opaque, .slidei.opaque').removeClass("opaque");
            $('.slidec.hvr-glow-selected').removeClass("hvr-glow-selected");
            $(nextSlide).addClass("opaque");
            $(nextControl).addClass("hvr-glow-selected");
        }
    });
});
</script>
<!-- Back Arrow Javascript -->
<script type="text/javascript">
$(document).ready(function() {
    $("#left_arrow").click(function(){
        var prevSlide = $('.slidep.opaque, .slidei.opaque').prev();
        var prevControl = $('.slidec.hvr-glow-selected').prev();
        if($(".slidei.opaque").is($(".slidei:first"))) {
            $('.slidep.opaque, .slidei.opaque').removeClass("opaque");
            $('.slidec.hvr-glow-selected').removeClass("hvr-glow-selected");
            $('.slidep:last, .slidei:last').addClass("opaque");
            $('.slidec:last').addClass("hvr-glow-selected");
        }
        else {
            $('.slidep.opaque, .slidei.opaque').removeClass("opaque");
            $('.slidec.hvr-glow-selected').removeClass("hvr-glow-selected");
            $(prevSlide).addClass("opaque");
            $(prevControl).addClass("hvr-glow-selected");
        }
    });
});
</script>

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

Workaround for syncing MobX observables when toggling a select/deselect all checkbox

In my application, there is a checkbox list with a 'Select All' checkbox at the top. The list is populated by an observable array of strings. When the user clicks on 'Select All', it should check all checkboxes; subsequent clicks should ...

javascriptreactjsmobxmobx-react

Error message: Angular - global is not defined when using Firebase

Click here to view the error image An error occurred due to a global reference issue in the following files: Object../node_modules/firebase/auth.js (auth.js:255), webpack_require (bootstrap:81), Object../node_modules/angularfire2/auth/auth.js (ven ...

javascriptangulartypescriptfirebase

Can CSS Grid layout be used to generate a grid consisting of squares?

I'm trying to set up a grid with equal square dimensions, but I'm having trouble with it. I've explored CSS Grid as a possibility since I thought it allowed for the creation of squares of equal height and width within a grid layout. However, ...

cssresponsive-designcss-grid

Vue - component props not properly updating when object changes are made

Within the main structure, I have both obj and newObj objects. I am monitoring any changes that occur within the obj object using deep: true, and then updating newObj accordingly. Although in my vue debugger, it appears that newObj has been updated as exp ...

javascriptvue.jsvuejs2

The title on my iOS app is off-center towards the left side

My title in the application is not centered on iPhone, but it appears fine when accessed through a browser. How can I fix this issue? Here is my HTML code: <div data-view="Moobile.ScrollView" class="component-testpage-view"> <div data-role="n ...

htmlioscssiphone

I am looking to retrieve products based on category alone, category and model together, or simply obtain all products in one go. At the moment, I am utilizing three distinct endpoints

I have 3 endpoints on my backend that fetch products based on certain criteria. I'm considering whether to refactor the logic and combine them into a single endpoint/function. Currently, my routes are structured as follows: router.get('/products& ...

javascriptnode.jsexpress

Highlighting the selected value in an Angular Material mat option

I am looking to enhance the background color of the selected value when it is clicked. Unlike the example I found, which highlights multiple select values, I only want to highlight the selected value when choosing an option. Check out this example for ref ...

htmlcssangularangular-material

Error Message in Angular 6 When Importing JQVMap - No Such 'vectorMap' Property on Type 'JQuery<HTMLElement>'

I'm currently facing some challenges trying to integrate a clickable map, JQVMap and JQuery into my Angular 6 project. Issue: error TS2339: Property 'vectorMap' does not exist on type 'JQuery'. Here is the component in question: ...

jqueryangularangular6jqvmapexternal-js

Passing Data from $http.get to Angular Controller Using a Shared Variable

One issue I'm facing is the inability to pass the content of a variable inside $http.get() to the outside scope, as it always returns undefined. I attempted using $rootScope, but that approach was not successful. controller('myControl', fu ...

javascriptangularjsangularjs-directiveangularjs-scope

Filling a blank table using jQuery

I am attempting to search for an item by sending a GET request to my service and then populating my table with the response, but I am struggling to achieve this with my current code. $(function(){ var $searchInput = $("#search"); $("#searchOptions").c ...

jqueryhtmlhtml-table

When the parent element reaches its maximum height, the child element becomes scrollable

I developed a modal window that showcases a form. Users can simply click on a button to insert new rows into the form. As more rows are added, the entire modal window should gradually increase in height until it's positioned 50px above the bottom of t ...

css

A guide on incorporating AJAX with jQuery to fetch a JSON file

I am struggling to incorporate a json file into my code using ajax. Despite my efforts, I can't seem to get it to work as I'm not well-versed in ajax and JQuery. The json file contains an array that I need to utilize in various sections of the j ...

javascriptjqueryjsonajax

Slider and overflow problem detected

I am currently attempting to make Unslider functional, but at present, it appears as though there is simply a stack of images on top of each other. Below is the HTML code being utilized: <div id="main"> <div class="slider"> <ul> ...

jqueryhtmlcssslideroverflow

What is a method to raise the height when scrolling down without reducing it when scrolling up?

For my One Page project, I want a DIV element to increase in height when scrolling down, but maintain that increased height when scrolling up. Currently, I am utilizing JQuery with the code snippet below: $(function(){ $(window).scroll(function() { ...

javascriptjquerycss

Working with Three.js: Creating a Box3 that is not part of the scene object

Having trouble adding a Bounding Box from an object in a different module. Everything works fine when I write it all in my main function, but once I create the function in a separate file and import it into the main file, it stops working. The error messa ...

javascriptthree.jscollision-detectionbounding-boxgltf

JSON object for source is not being accepted by the autocomplete feature

Here is the JSP page tag for an input text element: <input name="searchTextSpan" id="searchTextSpan" type="text"/> Below is the AJAX call that loads on document.ready: AUI().use("liferay-portlet-url", function(A) { var resourceURL = Liferay ...

javascriptajaxliferay-6jquery-autocomplete

How can I use CSS to ensure that both cards and images are equal in size?

I am currently utilizing react, with Material-ui being used for the Cards. For the layout, I have implemented CSS Grid Layout for the Grid system. Presently, the structure looks like this: https://i.stack.imgur.com/0FDyY.png However, my desired outcome i ...

javascriptreactjscssmaterial-ui

Prevent submission by disabling the button if any of the fields are left blank

I need assistance with a specific functionality on my form. I want to disable the submit button named "Store" when any of the dynamically generated selectors in the image are empty. This is the jQuery code I have tried: <script> var $submi ...

phpjquery

How to show multiline error messages in Materials-UI TextField

Currently, I am attempting to insert an error message into a textfield (utilizing materials UI) and I would like the error text to appear on multiple lines. Within my render method, I have the following: <TextField floatingLabelText={'Input Fi ...

javascriptreactjsmaterial-ui

Restrict the vertical camera rotation

Utilizing JSModeler for showcasing OBJ files. The software integrates THREE.JS and generates a PerspectiveCamera. My goal is to restrict the camera's Y-axis movement to prevent it from going beneath the object. While I am familiar with achieving this ...

javascriptthree.js