I want to make a dynamic bootstrap carousel with image thumbnails at the bottom. I went through several code snippets and answers which seems to be working in their demo and experimented those codes. I just got the code in this link working but the thumbnail was too small. Here are the functions I wrote to make dynamic carousel...
//make image thumbnails
function make_image_previews ($con){
$output = '';
$count = 0;
$result = make_query($con); //returns the images in database
while($row = mysqli_fetch_array($result)){
if($count == 0){
$output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active">
<img class="d-block w-100 img-fluid" src="'.$row['image'].'">
</li>';
}else{
$output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'">
<img class="d-block w-100 img-fluid" src="'.$row['image'].'">
</li>';
}
$count = $count + 1;
}
return $output;
}
And here is the html output in page source
<div class="row">
<div class="col-md-12">
<div id="dynamic_slide_show" class="carousel slide light-shadow carousel-fade carousel-thumbnails" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="upload/protected_photo-1515879218367-8466d910aaa4.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg" class="d-block w-100" />
</div>
</div>
<a class="carousel-control-prev" href="#dynamic_slide_show" 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="#dynamic_slide_show" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Carousel image preview-->
<ol class="carousel-indicators">
<li data-target="#dynamic_slide_show" data-slide-to="0" class="active">
<img class="d-block w-100 img-fluid" src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg">
</li>
<li data-target="#dynamic_slide_show" data-slide-to="1">
<img class="d-block w-100 img-fluid" src="upload/protected_photo-1515879218367-8466d910aaa4.jpg">
</li>
<li data-target="#dynamic_slide_show" data-slide-to="2">
<img class="d-block w-100 img-fluid" src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg">
</li>
</ol>
</div>
</div>
</div>
<hr>
There was a question with the same problem but the code was different to what I have provided in the link at top. I tried the answer changing the code but I was able only to see the three underlines. How can I solve the problem of small thumbnails in my code?
EDIT
When I tried the CSS
.carousel-indicators {
position: static;
}
.carousel-indicators>li {
width: 100px
}
the thumbnail overflows onto the next row. As in following picture, horizontal line, (<hr> tag) is on the end of the row where the carousel is present
Here is an example jsfiddle: https://jsfiddle.net/setw7kn0/
You can set the images width by changing .carousel-indicators > li to whatever you want (in the example i have used 100px). Also the position: static; in .carousel-indicators is to make the thumbnails stop overlapping the carousel.
Tell me if this is what you were looking for.
EDIT:
Well the reason that .carousel-indicators is overlapping the hr it's because hr shouldn't be placed directly inside .row, instead should be either inside a column inside a row or after the .row closing tag.
Also i have changed the .carousel-indicators > li height to auto so that you override the defaults bootstrap css, the default value of bootstrap is height: 3px; (so you are actually fighting bootstrap).
Related
i´m a little new here, i was looking for the answer and i didn´t find it.
I'm starting as a web designer/web developer.
I have a carousel of images in bootstrap, and a div at the top of it. This div is a simple title to the page.
i want to change the color title for a particular image when this is "active".
I tried this (because i saw that the image that is showing change its class name: "carousel-item" to: "carousel-item active") , but doesn't work.
This is my HTML:
<div id="titulo">Game of thrones</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item " data-interval="3000">
<img src="/img/portrait.jpg" class="d-block w-100" alt="throne">
</div>
<div class="carousel-item active" id="dragon" data-interval="3000">
<img src="/img/dragon.jpeg" class="d-block w-100" alt="got" data-interval="3000">
</div>
<div class="carousel-item" >
<img src="/img/houses.jpg" class="d-block w-100" alt="houses" data-interval="3000">
</div>
<div class="carousel-item" >
<img src="/img/evil.jpeg" class="d-block w-100" alt="badguy" data-interval="3000">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
const titulo= document.querySelector("#titulo");
const dragon=document.querySelector("#dragon");
if(dragon.classList.contains("active")){
titulo.style.color = "black";
}
</script>
The reason your current code isn't working is because the script only runs once when the page is loaded. Bootstrap comes with events that you can attach a function to which means you can check the class each time the carousel moves. You can read more about carousel events here.
Using the example in the link you can use the following, without changing your existing code too much:
$('#carousel').on('slid.bs.carousel', function () {
const titulo = document.querySelector("#titulo");
const dragon = document.querySelector("#dragon");
if (dragon.classList.contains("active")) {
titulo.style.color = "black";
}
});
Note: the event is slid not slide since the active class isn't applied until the slide transition has completed.
What might be better is to read the relatedTarget of the event and check if that is the dragon:
$('#carousel').on('slide.bs.carousel', function (evt) {
const titulo = document.querySelector("#titulo");
if (evt.relatedTarget.id === 'dragon') {
titulo.style.color = "black";
}
});
I see on the documentation page for bootstrap's carousel there is a property for direction under the events tab but i don't know the syntax to use it and can't find any examples, would appreciate any help on this.
From bootstrap's carousel documentation:
Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item
The carousel will emit an event called slide.bs.carousel (This event is fired when the carousel has completed its slide transition).
That event object has a property called direction (and its value is either "left" or "right").
$(function() { $("#carouselExampleControls").on("slide.bs.carousel", function(e) {
console.log(e.direction);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
The below CSS is supposed to cause a white border to appear below the currently active thumbnail in an image gallery but it does not.
.carousel-thumbnails .carousel-indicators li {
height: auto;
max-width: 100px;
width: 100px;
border: none;
box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
&.active {
border-bottom: 4px solid #fff;
}
}
Visual Studio 17 underlines the "&" symbol says there is a missing property. I've seen examples of setting things active like P or H1 but I don't understand why there is the "&" symbol there. The CSS came from the following link which has the complete set of code.
enter link description here
I've added the sample gallery to my ASP.NET MVC 5 application in a view. It all works except this CSS part to draw a thin border below the active thumbnail. Can someone please tell me how to fix it or is this something that just does not work under Visual Studio 2017?
Below is a copy of the MVC View I've created using the sample:
#{
ViewBag.Title = "Claremont Botanical Garden";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<link href="~/Content/slideshow/carousel-with-thumbails.css" rel="stylesheet" />
<script src="~/Scripts/slideshow/carousel-with-thumbails.js"></script>
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Squirrel-01-DSC_0028-1440.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Squirrel-02-DSC_0131-1440.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Squirrel-03-DSC_0154-1440.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Bird-01-DSC_0639-1440.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_bird-02-DSC_0158-1440.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Bird-03-DSC_0606-1440.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Bird-04-DSC_0637-1410.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Bird-hawk-01-DSC_0550-1440.jpg" alt="Third slide">
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" 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-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
<ol class="carousel-indicators">
<li data-target="#carousel-thumb" data-slide-to="0">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Squirrel-01-DSC_0028-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="1">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Squirrel-02-DSC_0131-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="2">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Squirrel-03-DSC_0154-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="3" class="active">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Bird-01-DSC_0639-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="4">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_bird-02-DSC_0158-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="5">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Bird-03-DSC_0606-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="6">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Bird-04-DSC_0637-1410.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="7">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Bird-hawk-01-DSC_0550-1440.jpg">
</li>
</ol>
</div>
<!--/.Carousel Wrapper-->
Thanks in advance.
What you copied is SCSS, not plain CSS. If you aren't using a pre-processor, the code as you copied it will not work.
The ampersand & in this context means the selector .carousel-thumbnails .carousel-indicators li.active The Sass Ampersand.
So if you aren't using a preprocessor, remove the nested rule &.active { border-bottom: 4px solid #fff; } and instead, create a new (non-nested) rule .carousel-thumbnails .carousel-indicators li.active { border-bottom: 4px solid #fff; } and it should work (I'm assuming you have something else applying the .active class when the element is active).
Your problem is in the CSS code.
You used with spaces between the classes names inplace of use with commas.
Your correct code should be like that:
.carousel-thumbnails ,.carousel-indicators ,li {
height: auto;
max-width: 100px;
width: 100px;
border: none;
box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
&.active
{
border-bottom: 4px solid #fff;
}
}
good luck!
I created a carousel in html/js with a title, caption and an image. I'm trying to transfer it using php but no idea how. I created a table in my database "Test" named "Carousel" with 5 rows (id,Title,Caption,Image and a link) and i input data in the field but no idea on how to select it on php in a carousel form.
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../images/aa1.jpg">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="../images/aa2.jpg">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption Caption<a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="#">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption. <a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="#">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="#">
<div class="carousel-caption">
<h4>Title</h4>
<p>Caption Caption Caption <a class="label label-primary" href="#" target="_blank">See More</a></p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="list-group col-sm-4">
<li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Title</h4></li>
<li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>Title</h4></li>
<li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>Title</h4></li>
<li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>Title</h4></li>
<li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>Title</h4></li>
</ul>
<!-- Controls -->
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- End Carousel -->
</div>
Is there a way i can transfer this to php/sql so i can update it easily?
I expect you want to add images to your carousel from a database correct? If so:
Save the location of the image (filepath) as a string in the database.
Use php to get all the filepaths in the database.
foreach filepath, echo out the div .item
For the carousel indicator circles, you can increase a number by 1 in every loop of the foreach, or use sql count. Though incrementing a number is probably easier.
If you wanted captions in all of them, just also get the caption from the table with the same Select query as getting the filepath
Guide:
<?php
$query = "SELECT captionTitle, captionContent, imageFilepath FROM carouselContent";
$result = mysqli_query($connection, $query);
$count = 0;
while($row = mysqli_fetch_assoc($result)){
$count++;
if($count === 1) echo "<div class='item active'";
else echo "<div class='item'";
echo "> Whatever else is in the item here";
When you get to adding the image tag:
echo "<img src='" . $row['imageFilepath'] . "' alt='carouselImage'>";
If you have indicator circles, use a
for($i = 1; $i <= $count; $i++){
echo "<carousel indicator code, replacing the carousel indicator slide target integer with $i";
//Note, this is for Bootstrap Carousels which are incredibly similar to your code
}
So guys, I have a carousel which works perfectly. Now I want to be able to modify it slightly so heres my script:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" id="1">
<center>Images go here!</center>
</div>
<div class="item" id="2">
<center>Imsdfsdfsfsdfsdfsdfsfsdfsdf</center>
</div>
<div class="item" id="3">
<center>Imasdfsdfsdfsdfre!</center>
</div>
</div>
<a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<br /><br />
<div class="container">
<ul style="float:left; margin-top: 200px; display:inline-block;">
<li style="display:inline-block;">Dashobard</li>
<li style="display:inline-block;">Timeline</li>
<li style="display:inline-block;">Visionboard</li>
</ul>
</div>
</div>
Works as you would expect - now underneath I would like to have 3 links say, link1, link2, link3 that when you click it changes the slide in the carousel, in addition to this I am looking to ad a captionhttp://jsfiddle.net/iamdanbarrett/CbtT9/ underneath each of those links. see my example image - I have tried using the current controls and tried to modify them with no success.
Here is a fiddle: Fiddle
If you want to achieve something like this this is what you have to do:
HTML code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item" id="id1">
<img src="http://placehold.it/300x200/888&text=Item 1" />
</div>
<div class="item" id="id2">
<img src="http://placehold.it/300x200/aaa&text=Item 2" />
</div>
<div class="item" id="id3">
<img src="http://placehold.it/300x200/444&text=Item 3" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<div class="container">
<ul>
<li style="display:inline-block;">Dashobard</li>
<li style="display:inline-block;">Timeline</li>
<li style="display:inline-block;">Visionboard</li>
</ul>
</div>
JavaScript code:
function slideTo(valoare){
if (valoare == 0) $('#myCarousel').carousel(0)
if (valoare == 1) $('#myCarousel').carousel(1)
if (valoare == 2) $('#myCarousel').carousel(2)
}
And the CSS code i've used for this example:
#myCarousel {
margin-top: 40px;
}
.carousel-linked-nav,
.item img {
display: block;
margin: 0 auto;
}
.carousel-linked-nav {
width: 120px;
margin-bottom: 20px;
}
.container {
text-align: center;
}
ul {margin: 0;}
Here is the jsfiddle
This example uses .carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).
Update 1:
Result here
Code here
Update 2:
Result here
Code here
You can try something like this..
http://bootply.com/113737
This example uses the data-target and data-slide-to navigate to specific slide.