Stack Overflow Asked by Jackawan on December 30, 2020
I’m trying to get the carousel that’s within a modal to open up on the image that has been selected by the user. I’ve tried data-slide-to="##" but no look with that. I’ll post the code below. I’ll remove repeated code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Name LTD - Gallery</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Gallery
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="bg-primary py-5 mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<h1 class="display-4 text-white mt-5 mb-2">Gallery</h1>
<p class="lead mb-5 text-white-50">Below Is A Portfolio Of Just A Few Of The Jobs We Have Done So Far </p>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Click An Image To Enter Slideshow</h1>
<hr class="mt-2 mb-5">
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="0">
<img class="img-fluid img-thumbnail" src="img/img14.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="1">
<img class="img-fluid img-thumbnail" src="img/img15.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="2">
<img class="img-fluid img-thumbnail" src="img/img9.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal" data-slide-to="3">
<img class="img-fluid img-thumbnail" src="img/img10.png" alt="">
</a>
</div>
</div>
</div>
<div class="container text-center">
<div class="modal fade imgGal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/img14.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img15.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img9.png" alt="..." style="width: 100%">
</div>
<div class="item">
<img class="img-responsive" src="img/img10.png" alt="..." style="width: 100%">
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Name 2020</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
So currently when the user selects image 1, image 1 is shown on the carousel but then if image 2 is selected image 1 still shows first etc. So what I want is for the user to be able to select say image 3, and image 3 be selected on the carousel so they don’t have to scroll through the carousel to get to it.
You should point your images to the slider also by doing data-target="#carousel-example-generic" where as you are pointing the tag to only modal so that is the reason it is not updating the slider,
So may be the following code helps you
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img14.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="0">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img15.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="1">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img9.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="2">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-4 h-100" data-toggle="modal" data-target=".imgGal">
<img src="img/img10.png" class="img-fluid img-thumbnail" data-target="#carousel-example-generic" data-slide-to="3">
</a>
</div>
</div>
Correct answer by Bhavana on December 30, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP