I have several photo albums (thumbnails, links) on one page. The idea is that when the user clicks on the thumbnail the bootstrap carousel slide show pops up with pictures from this album.
The HTML for one of the albums looks like this (the second one is identical):
<div class="container">
<div class="row">
<!-- Album 1 -->
<div class="col-sm-12 col-md-3 col-lg-3 box">
<span class="spanner"></span>
<div class=thumbnail style="background-image: url(image1.jpg);">
<div class="caption">
<h4>Album 1</h4>
<p class="photo-text">Album 1 description</p>
</div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="image1.jpg" alt="image1">
</div>
<div class="item">
<img class="img-responsive" src="image2.jpg" alt="image2">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is when I press on the album thumbnail both slide shows pop-up. I assume the problem is with "active" but I am not sure how to fix it. Thanks!
Check and make sure both carousels have a different id. Are you using the id to load the carousel?
Related
I am very new to web dev and i am trying to resolve this issue from quite some time, please help me with this,
I have implemented a series of verticle slides each slide contains 10 images and every time i reach bottom i call next images from api call. now i wish to print no. of slide i am presently active on I used below code for it but this way on going to top or below value of slide no. increments and finally becomes constant.
<div class="left">
{{slideno}}
</div>
<div v-for="(images, index) in slides"
:key="index" >{{setslideNumber(index)}}
<div class="container read">
<div
class="col-md-offset-1 col-md-11 col-sm-2 col-xs-12 reader-section"
>
<div
id="carousel-pager"
class="carousel slide "
data-ride="carousel"
data-interval="1000"
>
<div class="carousel-inner vertical">
<div class=" item" style="object-fit: fill;">
<div
v-for="(image, index) in images"
:key="index"
class="section"
style="color:#fff"
>
<img
:src="
image
"
class="img-responsive"
data-target="#carousel-main"
data-slide-to="0"
width:100
/>
</div>
<div v-if="images.length" v-observe-visibility="handleScrolledToBottom"></div>
</div>
</div>
<a
class="left carousel-control"
href="#carousel-pager"
role="button"
data-slide="prev"
>
<span
class="glyphicon glyphicon-chevron-up"
aria-hidden="true"
></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control"
href="#carousel-pager"
role="button"
data-slide="next"
>
<span
class="glyphicon glyphicon-chevron-down"
aria-hidden="true"
></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
methods: {
setSlideNumber(index){
this.slideno=index+1;
},
}
what value of sliden0 i am getting: 123....10
what i need the value of slide that is visible,
I would like a carousel that fills about half of the window. I've been reading through the documentation https://getbootstrap.com/docs/4.1/components/carousel/ and a following a youtube tutorial for help https://youtu.be/9cKsq14Kfsw?t=3510. My images fill the entire page plus more (when scrolled down) and I can't figure out how to make it smaller other than setting a fixed height in CSS which makes the image look squashed.
Here is my code
html, body {
width: 100%;
height: 100%;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
<!-- Image carousel -->
<div id="slides" class="carousel slide" data-ride="carousel">
<!-- Carousel images -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/home-1.png" />
<div class="carousel-caption">
<h1 class="display-2">Garnet Home Inspections</h1>
</div>
</div>
<div class="carousel-item">
<img src="img/home-2.png" />
<div class="carousel-caption">
<h1 class="display-3">Service Area</h1>
<h3>I travel all over the capital Region</h3>
<button type="button" class="btn btn-outline-light btn-lg">SET UP AN APPOINTMENT</button>
</div>
</div>
<div class="carousel-item">
<img src="img/home-3.png" />
<div class="carousel-caption">
<!-- put content here -->
</div>
</div>
</div>
<!-- Carousel buttons-->
<a class="carousel-control-prev" href="#slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <!-- Screenreaders only -->
</a>
<a class="carousel-control-next" href="#slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <!-- Screenreaders only -->
</a>
</div>
Thank you in advance :)
If anyone needs more information/code please let me know.
looks fine on computer, on tablet in horizontal it seems to crop into image "center".. on phones it crops into center even more not showing all the image.
code in source code view (dreamweaver)
<main id="main" class="site-main">
<section id="carousel-1" class="carousel slide section-slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" style="background: url(images/bg-1.jpg);">
<div class="container"><img src="http://roncartist.com/images/copyright_protected-1.png" alt="First slide"></div>
</div>
<div class="item" style="background: url(images/bg-2.jpg);">
<div class="container"><img src="http://placehold.it/640x340" alt="Second slide"></div>
</div>
<div class="item" style="background: url(images/bg-3.jpg);">
<div class="container"><img src="http://placehold.it/640x340" alt="Third slide"></div>
</div>
</div>
<a class="left carousel-control" href="#carousel-1" data-slide="prev"><span class="fa fa-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-1" data-slide="next"><span class="fa fa-chevron-right"></span></a>
example image
You have to aplly background-size:cover to the element .item
It stretch the background image to completely cover the content area.
Let me know if works.
Okay, so I'm trying to get a webpage to show a Bootstrap image carousel, which works! But I want some text to the right of it. I'm not trying to get the text to change with the image, just be to the side.
Here is the HTML for the page;
http://pastebin.com/EabGfv3H#
And here is the custom CSS I'm using;
http://pastebin.com/MEtF1hTR
And a JSFiddle;
http://jsfiddle.net/swfour/52VtD/3942/
Needed code for JSFiddle link, so here is the html;
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/Beaches and Villages\Golden Beach umbrellas home.JPG" alt="...">
<div class="carousel-caption">
Golden Beach
</div>
</div>
<div class="item">
<img src="images/Beaches and Villages\Limenas ancient city.jpg" alt="...">
<div class="carousel-caption">
Limenas
</div>
</div>
<div class="item">
<img src="images/Beaches and Villages\Potos sunset.JPG" alt="...">
<div class="carousel-caption">
Potos
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="carousel_text" class="col-md-6">
<div>
<p>
Thasos, an island surrounded by the crystal-clear emerald waters of the Aegean Sea is part of the Northeastern islands of
Greece, also being the closest one to the continent. It is the perfect getaway for holidays during summer, a place where
you can relax and enjoy your holidays, forget about all your worries on a quiet sandy beach, but also a place where you
can explore the Greek way of life, try the best foods and meet the most amazing people.
</p>
</div>
</div>
</div>
I've tried not using the bootstrap columns and just using float left and right, which didn't work.
From your image mockup, I assume you need the carousel on some 75% width while the other text/div on remaining 25% width within your main container. OR the text/div should be outside of carousel.
So if that's the case, try using this -
add a new class carousel-left to <div id="carousel-example-generic" class="carousel slide carousel-left" data-ride="carousel">
add/update your text-div in html as shown below:
<div class="bs-example" data-example-id="simple-carousel">
<div id="carousel-example-generic" class="carousel slide carousel-left" data-ride="carousel">...</div>
<div class="some-text">your text div</div>
</div>
add following in your css -
.carousel-left { width: 75%; float: left; }
.some-text { float: left; width: 25%; }
Hope it helps.
I add pull-left class to img, and add pull-right class to your text and place it inside <span> not <div> and remove carousel-caption from it.seems to work Pluncker
<div class="item">
<img class="pull-left" src="images/Beaches and Villages\Limenas ancient city.jpg" alt="...">
<span class="pull-right">
Limenas
</span>
</div>
I was working with carosel in bootstrap and I want background image to be blur and top image to be properly visible. For this I was using two classes in style but as a result both front and back images are coming blur. The fiddle for the same is here https://jsfiddle.net/v37wju8h/6/ . Please increase the screen size to check the problem with the result. Below is the code -
<div class="container">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner"> <!-- Wrapper for slides -->
<div class="item active back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
<img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg"/>
<div class="carousel-caption">
<h3>Image1</h3>
</div>
</div>
<div class="item back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
<img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg" />
<div class="carousel-caption">
<h3>Image2 </h3>
</div>
</div>
<div class="item back_img" style="background-image:url('http://www.pluots.net/media/full/18/dining-table-contemporary-in-wood-home-fred-by-vladimir-dining-table-contemporary-in-wood-home-fred-by-vladimir.jpg');">
<img class="front_img" src="http://www.pluots.net/media/full/18/furniture-tips-to-make-marvellous-round-dining-table-furniture-tips-to-make-marvellous-round-dining-table.jpg" />
<div class="carousel-caption">
<h3>Image 3</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
You can use opacity
opacity: 0.5
position: relative;