How to dynamic- "Bootstrap multi column carousel" using laravel please help...

Posted 1 month ago by developerRijan

hi , I am newbie in laravel & just creating multi column carousel using bootstrap but I can`t dynamic this ... please below my source code.

My requirement is in every carosuel-item, I need to show 4 images then carosuel-iteam will repeat with the records of my database image... please help me I trying to dynamic but can`t do this please....anyone help me ...

              @foreach($all_slider_data as $sliders)
              <div class="carousel-item @if($loop->first) active @endif">
                <div class="row">

                  @foreach($all_slider_data->take(4) as $sliders)
                  <div class="col-md-3 col-lg-3 carouselItemSingle">
                    <div class="single-sell-product">
                      <!-- Button trigger modal -->
                      <div class="card" data-toggle="modal" data-target="#card_one">
                        <img src="{{ asset('uploads/slider-images/'.$sliders->phone_image) }}" class="card-img-top" alt="">
                        <div class="card-body">
                          <h5 class="card-title">
                            iphone 6 plus silver
                          </h5>
                          <p>0.00</p>
                        </div>
                      </div>

                      <!-- Modal -->
                      <div class="modal fade popupMobleAndUserDetails" id="card_one" tabindex="-1" role="dialog" aria-labelledby="gadgetforCash" aria-hidden="true">
                        <div class="modal-dialog modal-xl" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="gadgetforCash">Sale Your Phone</h5>
                            </div>
                            <div class="modal-body">
                            <form>
                              <div class="row">
                                <div class="col-md-6 device-details-portion">

                                    <div class="portionTitle">
                                      <h3>Your Device Details</h3>
                                    </div>

                                    <div class="form-group">
                                      <label for="device_name">Step-1: Device Name</label>
                                      <input type="text" class="form-control" id="device_name" name="device_name" placeholder="Enter device name...">
                                    </div>

                                    <div class="form-group">
                                      <label class="form-check-label" for="device_storage">Step-2: Device Storage</label>
                                      <br>
                                      <input type="radio" name="device_storage" value="1"> 16G
                                      <input type="radio" name="device_storage" value="2"> 32GB
                                      <input type="radio" name="device_storage" value="3"> 64GB
                                      <input type="radio" name="device_storage" value="4"> 128GB
                                    </div>

                                    <div class="form-group">
                                      <label class="form-check-label" for="device_network">Step-3: Device Network</label><br>
                                      <small>What network is your iPhone is locked to?</small>
                                      <br>
                                      <input type="radio" name="device_network" value="1"> Unlocked
                                      <input type="radio" name="device_network" value="2"> EE/Orange/T-mobile/Virgin
                                      <input type="radio" name="device_network" value="3"> 02/Giffgaff/Tesco
                                      <input type="radio" name="device_network" value="4"> Vodafone
                                      <input type="radio" name="device_network" value="5"> 3 Mobile
                                    </div>

                                    <div class="form-group">
                                      <label class="form-check-label" for="device_condition">Step-4: Device Condition</label>
                                      <br>
                                      <input type="radio" class="" id="device_condition" name="device_condition" value="1"> New
                                      <input type="radio" class="" id="device_condition" name="device_condition" value="2"> Good
                                      <input type="radio" class="" id="device_condition" name="device_condition" value="3"> Faulty
                                    </div>

                                    <div class="form-group show-offer-amount">
                                      <label class="form-check-label" for="device_condition">Our Offer For You</label>
                                      <br>
                                      <div id="offerAmountShow">
                                        $xxxx
                                      </div>
                                    </div>

                                </div> <!-- .device-details-portion end here -->

                                <div class="col-md-6 seller-details-portion">
                                  <div class="portionTitle">
                                    <h3>Your Details</h3>
                                  </div>

                                  <div class="form-group">
                                    <div class="row">
                                      <div class="col">
                                        <label for="firstName">First Name</label>
                                        <input type="text" name="firstName" class="form-control" placeholder="First name">
                                      </div>
                                      <div class="col">
                                        <label for="lastName">Last Name</label>
                                        <input type="text" name="lastName" class="form-control" placeholder="Last name">
                                      </div>
                                    </div>
                                  </div>

                                    <div class="form-group">
                                      <label for="emailAddress">Email Address</label>
                                      <input type="email" class="form-control" id="emailAddress" placeholder="Email...">
                                    </div>

                                    <div class="form-group">
                                      <div class="row">
                                        <div class="col">
                                          <label for="phone">Phone</label>
                                          <input type="text" name="phone" class="form-control" placeholder="Phone">
                                        </div>
                                        <div class="col">
                                          <label for="paymentMethod">Payment Method</label>
                                          <select class="form-control" name="paymentMethod">
                                            <option>Select Payment Method</option>
                                            <option value="">Instant Bank Transfer</option>
                                          </select>
                                        </div>
                                      </div>
                                    </div>

                                    <div class="form-group">
                                      <div class="row">
                                        <div class="col">
                                          <label for="accountNumber">Account Number</label>
                                          <input type="text" name="accountNumber" class="form-control" placeholder="Account Number">
                                        </div>
                                        <div class="col">
                                          <label for="sortCode">Sort Code</label>
                                          <input type="text" name="sortCode" class="form-control" placeholder="Sort Code">
                                        </div>
                                      </div>
                                    </div>

                                    <div class="form-group">
                                      <label for="postCode">Post Code</label>
                                      <input type="text" class="form-control" id="postCode" name="postCode" placeholder="Post Code...">
                                    </div>

                                    <div class="form-group">
                                      <label for="voucherCode">Voucher Code (Optional)</label>
                                      <input type="text" class="form-control" id="voucherCode" name="voucherCode" placeholder="Voucher Code...">
                                    </div>

                                    <button type="submit" class="btn btn-primary submitDetailsButton">Submit</button>

                                </div> <!-- .seller-details-portion end here -->
                              </div>
                            </form>

                            </div> <!-- modal-body end here -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div> <!-- .single-sell-product end here -->

                  </div>
                  @endforeach

                </div>
              </div>
              @endforeach


            </div>

              <a class="carousel-control-prev" href="#carouselExampleControls_three" role="button" data-slide="next">
                <i class="fas fa-backward"></i>
              </a>
              <a class="carousel-control-next" href="#carouselExampleControls_three" role="button" data-slide="prev">
                <i class="fas fa-forward"></i>
              </a>

        </div>
    </div> <!-- .horizontalPosts start from here -->

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.