I'm using bulma-carousel to show a slides of three images, it display all three images as slider (side by side) and they can be change the active, but the "no active" images are displayed too.
<section class="section">
<div class="container">
<div id="post_images" class="carousel">
<div class="item-1">
<figure class="image is-16by9 has-ratio">
<img src="path/to/image"/>
</figure>
</div>
<div class="item-2">
<figure class="image is-16by9 has-ratio">
<img src="path/to/image"/>
</figure>
</div>
<div class="item-3">
<figure class="image is-16by9 has-ratio">
<img src="path/to/image"/>
</figure>
</div>
</div>
</div>
</section>
<script>
bulmaCarousel.attach('#post_images', {
slidesToScroll: 1,
slidesToShow: 1,
loop: true,
});
</script>
I made this Codepen example.
Solved with:
.carousel {
overflow: hidden;
}
Related
Created a swipe with thumbs. When I click on thumbs, it scrolls to the right with incomprehensible logic. I cannot understand what this may be connected with, I am trying to solve this problem for the second day, nothing comes out. Is it possible to somehow disable this option so that you can remove this scroll when clicked?
const productThumbs = new Swiper(".swiper-thumbs", {
spaceBetween: 30,
loop: true,
slidesPerView: 6,
loopedSlides: 7,
});
const productCarousel = new Swiper(".swiper-content", {
effect: 'fade',
fadeEffect: {
crossFade: true
},
touchRatio: 0,
thumbs: {
swiper: productThumbs,
}
});
.swiper-slide{
background: gray;
}
.swiper-thumbs .swiper-slide{
height: 300px;
}
.swiper-content{
margin-top: 30px;
}
.swiper-thumbs .swiper-slide{
display: flex;
flex-direction: column;
}
.swiper-content .swiper-slide{
height: 250px;
background: black;
color: white;
font-size: 72px;
}
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="slider-title">01</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">02</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">03</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">04</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">05</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">06</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper-content">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
I tried to do this, but I just simply do not understand why this is happening
In the "thumbs" slider, you need to change the value "loop" to "false" or remove the key "loop" from "thumbs" slider.
I am trying out owl-carousel 2.3.4 (https://owlcarousel2.github.io/OwlCarousel2/) - all is fine except that the navigation dots are not showing. They aren't images so I don't know why it's not loading. I was wondering what I am doing wrong. I can see that it's working here (https://codepen.io/Ittisafur/pen/ggqzwY) but this uses owl-carousel version 1.3.3.
<style type="text/css">
.owl-carousel div.content
{
box-sizing:border-box;
background-color:#fff;
border:1px solid red;
min-height:150px;
padding:10px;
margin:10px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="content">
<p>Text 1</p>
</div>
<div class="content">
<p>Text 2</p>
</div>
<div class="content">
<p>Text 3</p>
</div>
<div class="content">
<p>Text 4</p>
</div>
<div class="content">
<p>Text 5</p>
</div>
<div class="content">
<p>Text 6</p>
</div>
<div class="content">
<p>Text 7</p>
</div>
<div class="content">
<p>Text 8</p>
</div>
<div class="content">
<p>Text 9</p>
</div>
<div class="content">
<p>Text 10</p>
</div>
</div>
<script>
$(document).ready(function()
{
$('.owl-carousel').owlCarousel(
{
center:false,
items:5,
loop:true,
margin:10,
dots: true,
autoplay:true
});
});
</script>
Add the owl-theme class to your container:
<div class="owl-carousel owl-theme">
Add the owl-theme class to your container:
<div class="owl-carousel owl-theme">
<div class="pr-2 pl-2 item"> </div>
<div class="pr-2 pl-2 item"> </div>
</div>
I am having issues making the text area fill the width of the panel any ideas??
My code is below
<div class="panel panel-primary">
<div id="div_EssentialInformation" class="panel-heading">Essential information</div>
<div id="content" style="display:none;">
<div class="panel-body">
<textarea class="form-control" rows="3" style="resize:none;"></textarea>
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a id="btn_edit" class="btn btn-primary">Edit</a>
<a id="btn_save" class="btn btn-danger" style="display:none">Save</a>
</div>
</div>
</div>
</div>
i have a script that toggles the display of the content div, below is the js script
$("#div_EssentialInformation").click(function () {
$("#content").slideToggle(500);
})
I am getting this
Add this to your css
textarea {
width: 100% !important;
}
The bootstrap carousel is working and looping around images. However, when you first open the web page, the carousel slider displays a empty background for a split-second. Afterwards, it is working properly.
I tried to solve it through this css but does not work.
.carousel-control {
background-color: transparent;
}
There are some questions related to preload whole carousel. What kind of jquery code is needed to do that?
Do you know how to get rid of the split-second empty background?
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="{% static 'img/img1.jpg' %}" alt="First slide" />
</div>
<div class="item">
<img class="second-slide" src="{% static 'img/img2.jpg' %}" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="{% static 'img/img3.jpg' %}" alt="Third slide">
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel"></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"></a>
</div>
This worked for me.
CSS:
.preload{ display: none; }
HTML
<div class="preload">
<img src="img/img1.jpg" />
<img src="img/img2.jpg" />
<img src="img/img3.jpg" />
</div>
I have simple manual text slider with using show/hide code. every thing is ok but when i click previous slide button, current text will be hide but previous one won't show. why it doesn't show ?!
this is my html code:
<div class="hand_1" id="hand_1">
<img id="hand_img_1" src="myimage1.png" width="176.25" height="332.25" />
<div class="hand_text_1">
<h2>header</h2>
<p>paragraph 1</p>
<div class="connect-links">
<a id="next_icon_1" href="#" ></a>
</div>
</div>
</div>
<div class="hand_2" id="hand_2" style="display:none;">
<img id="hand_img_2" src="myimage2.png" width="176.25" height="332.25" />
<div class="hand_text_2">
<h2>header 2</h2>
<p>paragraph 2</p>
<div class="connect-links">
<a id="next_icon_2" href="#"></a>
<a id="previous_icon_2" href="#"></a>
</div>
</div>
</div>
and this is my javascript:
$(document).ready(function(){
$('#next_icon_1').on("click", function(){
$('#hand_img_1').fadeOut('fast');
$('.hand_text_1').fadeOut('fast');
$('.hand_2').fadeIn('fast');
});
$('#previous_icon_2').on("click", function(){
$('#hand_img_2').fadeOut('fast');
$('.hand_text_2').fadeOut('fast');
$('.hand_1').fadeIn('fast');
});
});