Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Carousel: I want the next item to appear when I press the Radio Button

I want to display the next carousel-item when Id="item1" of Radio Button is selected by default and Id="item2" is pressed.
It would be best if this could be done without using Javascript.
If Javascript is necessary, please let us know how to do it or give us 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solve this problem!! Thank you for helping me !!


  2. 0

    you would definitely need a javascript for this:

    logic is this -> you add an event listener when on the radio inputs when they are clicked you will change the dom with javascript. you will also need a images for the carousel. the radio input depends on how many images you have.

    here’s the code by this you can achieve

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

const changeImage = (index) => {
  currentIndex = index;
  // change the dom here
}

// add event listeners for radio button and add data-key value to them to get their index or some other if you want
document.getElementById("item2").addEventListener("click", () => {
  currentIndex = 2;
  getImage();
  changeImage();
})

    if you want to create a scratch carosel here’s the link for the instructions:

    click here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search