I searched over internet that we cannot put the .carousel-left,.carousel-right in .carousel-inner. Before putting them out of the .carousel-inner it worked fine but after taking them it became like this:
And before it was this:
Here is my code:
HTML:
<div id="mySlider" class="carousel slide" style="width: 600px; height:340px;">
<div class="carousel-inner">
<div class="item active">
<img alt="" style="width: inherit; height: inherit;" src="http://getbootstrap.com/2.3.2/assets/img/examples/slide-01.jpg" />
<div class="carousel-caption">
<p>Video Caption</p>
</div>
</div>
<div class="item">
<img alt="" style="width: inherit; height: inherit;" src="http://getbootstrap.com/2.3.2/assets/img/examples/slide-01.jpg" />
<div class="carousel-caption">
<p>Video Caption 2</p>
</div>
</div>
<a class="carousel-control left" href="#mySlider" data-slide="prev">‹</a>
<a class="carousel-control right" href="#mySlider" data-slide="next">›</a>
</div>
</div>
I am using bootstrap so I don't need to mension the CSS in here :)
Please tell me how can I solve this issue?
Related
I am working on simple HTML web but I am stuck on something like 3 boxes I want accordingly in one line you can check the screenshot of example for that how I want I tried many times to do by every way but I failed to solve or sort out this issue kindly please help me in that
see this screenshot how it showing
Here is the screenshot of the example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="property-wrap mb-2 row no-gutter" id="pp">
<div class="col-md-4 col-sm-20">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/smart1" class="image-effect overlay">
<img src="assets/images/smart1-logo.svg" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">SuperShopper</h4>
<div class="mb-15">
<p>Lekki Phase 1, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/green_way" class="image-effect overlay">
<img src="assets/images/green_way.png" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">GreenWay Supermarket</h4>
<div class="mb-15">
<p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase bg-blue">for sale</span> -->
<a href="#" class="image-effect overlay">
<img src="assets/images/pjv.png" alt="" style="width: 100px; height: 100px; border-radius: 0px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">PJV Supermarket</h4>
<div class="mb-15">
<p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
</div>
<!--content-->
</div>
<!--content-->
</div>
</div>
So I was having trouble with changing a 3x3 image gallery layout on any screen > than 768px (tablet/desktop) to an image slider for any screen < than 768px (mobile).
After the help of everyone and especially Danilo (solutions in the comments), the problem was that the css was not correctly targetting the screen, I needed - #media only screen, I had also missed a DIV... (I know noob error).
So if anyone is trying to change the content displayed from desktop layout to mobile layout in Bootstrap 4, you can use CSS media queries that target the wrapped DIV to display or not display.
Updated working snippet below:
#media only screen and (min-width: 768px) {
.slider {
display: none;
}
.block {
display: block;
}
}
#media only screen and (max-width: 768px) {
.slider {
display: block;
}
.block {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}
<!--- Start of Gallery Section -->
<div id="hold-tests">
<div class="col slider">
<div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
<div class="carousel-inner col-" role="listbox">
<!--- First Slide -->
<div class="carousel-item active">
<img src="Img/PHportrait.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait.png" alt="background image">
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
<div class="col block">
<div id="gallery" class="offset">
<div class="col-md">
<div class="row no-padding">
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
</div>
<!--- End of Gallery Section -->
Since you're using bootstrap, use it. No jQuery needed for this, as it's completely covered already.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-none d-md-block">
Only visible starting from md
</div>
<div class="d-md-none">
Only visible on small screen
</div>
https://getbootstrap.com/docs/4.0/utilities/display/
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Also note that ids usually don't start with a #. Even though this may be legal, you'd then at least had to select them with $('##option1') in your jquery code.
You can do that, just using CSS
html
<div class="hold-tests">
<div class="col test1">Test1</div>
<div class="col test2">Test2</div>
<div class="col test3">Test3</div>
</div>
css
#media only screen and (min-width: 768px) {
.test1 {
display: none;
}
.test3 {
display: block;
}
}
#media only screen and (max-width: 768px) {
.test3 {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}
I have to change the original bootstrap CSS slightly in a tab-content in order to allow for a script to run.
.tab-content>.tab-pane:not(.in) {
display: none;
}
Is not an option here since it remove the content from the dom and blocks the script from runing.
I have tried several option, the one working best so far is :
.tab-content>.tab-pane:not(.in) {
display:block !important;
height:0 !important;
}
However the transition is "jumpy", the tab replacing the previous active one disapears for a split second, bringing everything below it up then straight back down. Not smooth at all. Do I have to resort to create the whole thing from scratch or is there a fix using bootsrap ?
edit: added more code
HTML:
`
JERSEYS
BIBS & SKINSUITS
<div class="tab-content">
<div id="jerseys" class="tab-pane fade in active">
<div class="nopadding">
<div class='slider-jerseys featured-product-box'>
<div class="slide slick-slide">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
</div>
<div class="product-link">
<a class="view-product" href="">VIEW ALL JERSEYS</a>
</div>
</div>
</div>
<div id="bibs" class="tab-pane fade">
<div class="nopadding">
<div class='slider-bibs featured-product-box'>
<div class="slide slick-slide">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
</div>
<div class="product-link">
<a class="view-product" href="">VIEW ALL BIBS & SKINSUITS</a>
</div>
</div>
</div>
`
CSS:
.tab-content>.tab-pane:not(.in) {
display:block !important;
height:0 !important;
}
I'm working on an html site with a lot of images, to reduce loading time I'm going to load hidden images when user click on the cover image with javascript, then insert it into bootstrap carousel.
I tried to make it, but unsuccessful. Images aren't load. Any help?
Here is my last code:
HTML
<li>
<a href="#" onclick="imgFilter('.ar-img')">
<img src="images/AR/01.jpg" alt="">
</a>
<div class="accordion carousel-inner">
<div class="item active">
<img src="images/AR/01.jpg" alt="slide">
</div>
<div class="item">
<img class="ar-img" src="" data-src="images/AR/02.jpg" alt="slide">
</div>
<div class="item">
<img class="ar-img" src="" data-src="images/AR/03.jpg" alt="slide">
</div>
</div>
</li>
<li>
<a href="#" onclick="imgFilter('.br-img')">
<img src="images/BR/01.jpg" alt="">
</a>
<div class="accordion carousel-inner">
<div class="item active">
<img src="images/BR/01.jpg" alt="slide">
</div>
<div class="item">
<img class="br-img" src="" data-src="images/BR/02.jpg" alt="slide">
</div>
<div class="item">
<img class="br-img" src="" data-src="images/BR/03.jpg" alt="slide">
</div>
</div>
</li>
JS
function imgFilter(id) {
var imgId = $(id);
$("imgId").each(function(i) {
$("this").setAttribute('src', $("this").getAttribute('data-src'));
});
};
Something in the lines of:
$(".item img").each(function(i) {
$("this").setAttribute('src', $("this").getAttribute('data-src'));
}
however i would use jQuery plugin lazyload instead (http://www.appelsiini.net/projects/lazyload).
Assumed you have css like:
.item{
width:200px;
height:auto;
}
.item img{
width:100%;
height:auto;
}
I can't get Bootstraps carousel to work with rails... what am I missing?
1.) I downloaded a custom version of bootstrap with the carousel component.
2.) Placed it in my assets/js and required the file in application.js
3.) Initialized the carousel by:
$(document).ready(function(){
$('.carousel').carousel()
});
4.) Put my html markup:
<section class="wrapper row">
<article class="slider">
<!-- Carousel - consult the Twitter Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</article>
</section>
It's not working! Any ideas?