Slideshow: I hope the Radio Button triggers the appearance of the next item in the rotation

I need to implement a carousel that displays the next item (Id="item2") when a specific radio button (Id="item1") is selected by default and another radio button (Id="item2") is pressed. Ideally, I would like to achieve this without relying on JavaScript, but if it's absolutely necessary, please provide instructions or point me to a reference site.

    <div class="container-fluid">
    <div class="row align-items-center">
        <div class="col-auto">
            <h3 class="mb-3">Recommended</h3>
        </div>
        <div class="col-12 p-0 mb-3">
            <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row g-6 border border-dark-3">
                            <div class="col-xl-2 col-lg-4 col-md-3  col-xs-1 p-0 ps-2">
                                <div class="card p-2 border-1 rounded-0 h-100">
                                    <img class="card-img-top custom-card-img-top" alt="..." src="">
                                    {{-- Todo: Change to heart icon and button by conditional --}}
                                    <i class="fa-solid fa-heart position-absolute top-0 end-0 m-3 heart-icon"></i>
                                    <div class="card-body p-2">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- This is second Item  --}}
                    {{-- Todo: Add JavaScript if the radio is pressed it should show up second item  --}}
                    <div class="carousel-item">
                        <div class="row g-6 border border-dark-3">
                            <div class="col-xl-2 col-lg-4 col-md-3  col-xs-1 p-0 ps-2">
                                <div class="card p-2 border-1 rounded-0 h-100">
                                    <img class="card-img-top custom-card-img-top" alt="..." src="">
                                    {{-- Todo: Change to heart icon and button by conditional --}}
                                    <i class="fa-solid fa-heart position-absolute top-0 end-0 m-3 heart-icon"></i>
                                    <div class="card-body p-2">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- This is second Item  --}}
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 text-center">
        <div class="form-check form-check-inline m-0">
            <input class="form-check-input" type="radio" name="item-recommended" id="item1" checked>
        </div>
        <div class="form-check form-check-inline m-0">
            <input class="form-check-input" type="radio" name="item-recommended" id="item2">
        </div>
        <div class="form-check form-check-inline m-0">
            <input class="form-check-input" type="radio" name="item-recommended" id="item3">
        </div>
    </div>
</div>
javascriptlaravelbootstrap-5

Answer №1

If you're looking to create a dynamic carousel, JavaScript is the way to go:

The approach involves setting up event listeners for radio inputs that trigger DOM changes using JavaScript. Additionally, you'll need images corresponding to each slide in the carousel. The number of radio inputs should match the number of images.

Check out this code snippet to implement the functionality:

let currentIndex = 0;
let images = ["src1", "src2", "src3"];
const getImage = () => {
   return images[currentIndex];
}

const changeImage = (index) => {
  currentIndex = index;
  // Implement DOM manipulation here
}

// Add event listeners to radio buttons and assign data-key values for indexing purposes
document.getElementById("item2").addEventListener("click", () => {
  currentIndex = 2;
  getImage();
  changeImage();
})

To build a scratch carousel from scratch, follow this guide for detailed instructions:

Access tutorial here

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

How can union types be used correctly in a generic functional component when type 'U' is not assignable to type 'T'?

I've been researching this issue online and have found a few similar cases, but the concept of Generic convolution is causing confusion in each example. I have tried various solutions, with the most promising one being using Omit which I thought would ...

javascriptreactjstypescript

Encounter a problem while installing node modules

I am facing an issue with my test directory which contains a package.json file: { "name": "test", "version": "0.0.1", "dependencies": { "hem": "~0.1.6", } } Upon trying to run node install, I encounter the following error: module.js:337 ...

javascriptnode.jsnpm

How can I display actual images received as escaped string literals from ExpressJS?

Is there a way to transform this data from ExpressJS into an actual image? The information I'm receiving looks like this instead of an image: {`data: 'PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00\x00\ ...

javascriptreactjsimageexpressstring-literals

Mastering the art of completing a form using AJAX

I'm working on a checkbox that triggers AJAX to create a new log. It populates the necessary information and automatically clicks the "create" button. However, I'm facing an issue where the hour value is not changing. Any help on what I might be ...

javascriptajaxformspost

Keep going in the for await loop in NodeJS

My code snippet looks like this: for await (const ele of offCycles) { if ((await MlQueueModel.find({ uuid: ele.uuid })).length !== 0) { continue; } <do something> } I'm curious if it's possible to use a continue st ...

javascriptnode.jstypescriptasync-await

Link the Sass variable to Vue props

When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly ...

javascriptcssvue.jssass

Grabbing only the button element using jQuery when a click event occurs

HEY THERE! I have a simple question that I need help with. To better explain the issue, I've included a small code snippet below. The problem I'm facing is related to grabbing the id of a button. Everything works fine except when I click on any ...

javascriptjqueryhtml

What is preventing me from injecting a service into an Angular factory/injector?

I came up with an authentication service (AuthenticationService) that I utilize for making calls to a WEB API. Recently, I stumbled upon interceptors and got intrigued. I thought it would be interesting to create an interceptor that can intercept requests ...

javascriptangularjs

What is the best way to retrieve the image name and image type when uploading them through the Froala editor

After uploading an image using Froala Editor, I encountered a problem where I couldn't retrieve the image name and type in ajax. I needed to find a way to transfer that file to my own server with Laravel. Here is the code snippet for the ajax part: ...

ajaxlaravel

What could be the reason for the three.js scene failing to render in my Svelte application?

Scene.svelte <!-- Start by binding a container, then add the renderer to this container onMount --> <script> import { onMount } from 'svelte'; import * as THREE from 'three'; let container; onMount(async () = ...

javascriptdebugginganimationthree.jssvelte

Node.js user update complete

I am currently working on enabling users to edit their profiles. However, the code I have set up does not seem to be functioning as expected. The form I am using looks like this: <form action="/dashboard/users/edit/:id" method="put"> And my route ...

javascriptnode.jsexpress

Convert the 'value' attribute in HTML into a clickable link

Is there a way to make the output value of an HTML input field into a clickable link? Right now, it appears as follows: <input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactD ...

javascriptphphtml

Is there a way to create a discord.js bot that can search for past messages without the need for a json file or storing them in a database?

Similar to the search feature in Discord. Imagine being able to enter !search [user] [query] and getting a response like "50 messages match your query." This would be like a word counting bot that doesn't need a database or local storage.The bot ...

javascriptnode.jsdiscorddiscord.js

My HTML file seems to be ignoring the styles in my CSS file. What could be causing this issue?

I've started incorporating bootstrap 5 into my html page. Below is the code snippet: <link rel="stylesheet" src="/main_styles.css"> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" cla ...

htmlbootstrap-5

Retrieve attributes of an html element modified by AJAX request

I am currently developing a small project that involves performing CRUD operations on a MySQL table using PHP and jQuery. The table is integrated into the layout in the following manner: <?php require '../connect.php'; $sql = "SELECT id ...

javascriptphpjquerymysqlajax

Is there a way to display a bootstrap modal when the page is refreshed?

Is there a way to automatically display a Bootstrap modal box without the need for clicking anywhere? I want the modal to appear every time the page is refreshed, rather than requiring a click event. Can anyone provide guidance on achieving this? < ...

javascripthtmljquerycsstwitter-bootstrap

Script on Tampermonkey executed prior to page loading

I am facing a challenge with hiding a specific section from an HTML page: <h1 data-ng-show="!menuPinned &amp;&amp; !isSaaS" class="logo floatLeft" aria-hidden="false"><span>XXX&nbsp;</span><span style="font-weight: bold;"& ...

javascripthtmltampermonkey

AngularJS allows for versatile filtering of objects and arrays using checkboxes

I am looking to implement a filter functionality similar to the fiddle mentioned in the first comment below. However, I do not want to capture the checkboxes category from ng-repeat. Instead, I only want to input the checkboxes' value and receive the ...

javascriptangularjscheckboxfiltering

From Python Plotly to JavaScript Plotly - Leveraging the Power of

My primary goal is to avoid using JavaScript and instead focus on analytics. Is it possible for me to create Plotly graphs in Python (for example, in Jupyter notebooks) and then utilize the write_html function to seamlessly integrate them into fully deve ...

javascriptpythonplotly

What is the best way to determine if certain rows of data have been successfully loaded when working with Ext.data.operation and an ajaxProxy?

Here is the provided code snippet: Ext.define('Book', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'title', type: 'string'}, {name: &apo ...

javascriptajaxextjsextjs4