html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red ">Slide 1</div>
<div class="swiper-slide blue">Slide 2</div>
<div class="swiper-slide green">Slide 3</div>
</div>
</div>
js
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
loop: true,
autoplay: 5000,
effect: 'fade'
});
bug recur steps
open this page in two tab A tab:A,B
activate Tab A
change Tab A window size
wait Tab A swiper switch to next slider
switch to Tab b, slide error
jsbin live demo
js bin live demo
github demo
https://github.com/ningshen/swiper-resize0bug
Related
My requirement is something like this.
I got the list of images from the back-end.
I want to pass those image names to the carousel to display images.
This is my code.
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
}
}
</script>
But this method doesn't work. How do I pass images to my carousel element?
The problem is that you're setting all carousel slides to active, so they will all display at once. Use :class to conditionally set the active slide...
<div class="carousel-item" v-for="(banner,idx) in banners" :class="{ active: idx==0 }">
<img :src="banner" alt="" class="img-fluid">
</div>
Also, make sure the :src="'./assets/${banner}'" reference is actually working to find the images.
Working demo on Codeply
Note: You don't want to use jQuery $('.carousel').carousel(); to load the Carousel since you're already using the data-ride="carousel" attribute. As stated in the Bootstrap 4 docs...
The data-ride="carousel" attribute is used to mark a carousel as
animating starting at page load. It cannot be used in combination with
(redundant and unnecessary) explicit JavaScript initialization of the
same carousel.
From https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
Vue hasn't mounted this component yet on page load. So you gotta initialize the slider only after it has mounted.
So you gotta remove data-ride="carousel", and add $('.carousel').carousel() in the mounted hook (assuming that the jquery $ is available as a global variable). Make sense ?
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
},
mounted(){
$('.carousel').carousel();
}
}
</script>
I used bootstrap 3 and blueimp-gallery in a web html5. My problem is a carousel-gallery dont show images and receive a error in a console "Uncaught TypeError: Cannot read property 'style' of undefined" when i use a blueimp-gallery-carousel in a modal div, but if i enter in a developer tools for chrome, this error disappears, and the images show in carousel-gallery.
The code.
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Vinilos</h2>
<div id="links">
1
2
3
</div>
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<p>Vinilos para rotulacion, decorativos, efecto espejo, fibra de carbono, refractivos, hologramas y farolas</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar Producto</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my javascript
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
</script>
and the link web problem
http://www.colombiawaterprint.com/web/index3.html
How i Solve this error?
I believe your problem is that your blueimp gallery is initially hidden as it is in a Bootstrap Modal. As such, when you first initialize the gallery it can't find the gallery. I think all you need to do is wait for the Bootstrap modal to be shown and then initialize the gallery.
Bootstrap triggers an event that you can listen for for this very purpose - http://getbootstrap.com/javascript/#modals-events - You probably want the shown.bs.modal event.
You would use it something like this. (assuming jQuery is loaded)
$('#portfolioModal1').on('shown.bs.modal', function (e) {
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
})
Bear in mind this is untested code and may not 'just work'. But hopefully you get the idea. You also may want to do a test to see if you've already initialized the gallery, as it stands this would re-initialize it every time the shown.bs.modal event was fired.
I want to have a page with the following responsive layout:
Image 1) A responsive page layout with 3 boxes (on small/medium screen)
Image 2) A responsive page layout with 3 boxes (on wide screen)
The goal is to make this page responsive so that whenever screen is too wide, box 3 will jump next to box 2 (like image 2). For this I use grid system of Bootstrap with allocating "8" spans for Box 1 and "4" for box 2 and 3. It works the way I described. Now I want to fix the position of Box 2 and Box 3 so when I scroll the page (to see the content of Box 1) I will see Box 2 and 3 in my viewport and I don't want to make Box 1 scrollable! I want the whole page to scroll! Do you know any Bootstrap solution that will handle this situation? (I want to keep the responsive layout of the whole page)
This is the basic code that I have for the page:
<div class=row>
<div class="col-md-8 col-lg-6">Box 1</div>
<div class="col-md-4 col-lg-3">Box 2</div>
<div class="col-md-4 col-lg-3">Box 3</div>
</div>
Right now I can make Box 1 scrollable but it will put the scrollbar next to box 1, but I want it to be at the right side of the page, so the whole page scrolls but box 2 and 3 are fixed. And at the same time, on large screens they will change their position and all 3 boxes will be next to each other!
Is there any suggestions?
FIXED
If i got you right :) Here is a fiddle : https://jsfiddle.net/fL2L0qnj/2/ , just resize the result area to see effect :)
HTML :
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="box0"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="row">
<div class="col-xs-6 col-md-12"> <!--do this at your preference, look at example and then
arrange it for your self :)
<div class="box1"></div>
</div>
<div class="col-xs-6 col-md-12">
<div class="box2"></div>
</div>
</div>
</div>
CSS:
.box1,.box2{
width:80%;
height:100px;
margin:10px auto;
}
.box0{
width:80%;
height:220px;
margin:auto;
margin-top:10px;
background:green;
}
.box1{
background:blue;
}
.box2{
background:red;
}
JQUERY:
$(window).scroll(function() {
var y = $(".keeptop").offset().top;
var scrollY = $(window).scrollTop();
if (scrollY > y) {
var padY = scrollY - y;
$(".keeptop").css("padding-top", padY);
}
});
I want the dijit splitter to minimize when user click it and go back to its position when clicked again (I don't care for the draggable feature)
how do I do it ?
In this example I want the panel on the right to minimize when click on the splitter
http://77.235.53.170/split/split.htm
You can try use dojox.layout.ExpandoPane at your left pane.
var bc = new BorderContainer({
splitter:true,
gutters:false
}, containerDiv);
new ExpandoPane({
region:"left",
title: "Expandable pane",
className: yourClassName
}).placeAt(bc);
EDIT: update based on request:
put this in your head:
<link href="js/dojox/layout/resources/ExpandoPane.css"
rel="stylesheet" type="text/css" />
change you pane like this:
<div id="leftCol" class="edgePanel" title="Left Expando" data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="title:'Left Expando', region: 'leading', splitter: true" style="width: 250px;">
<div data-dojo-type="dijit/layout/TabContainer" style="width: 400px; height: 95%;"
tabstrip="true">
<div data-dojo-type="dijit/layout/ContentPane" title="Layers" selected="true">
<div id="CheckboxTree">
</div>
</div>
</div>
</div>
I use slidesJS in my homepage.Now I want to click a button to make it pause,but it seems that there is no pause option in slidesJS document.
SlidesJS document:
http://slidesjs.com/
HTML makeup
<!--slider start-->
<div id="slides">
<div class="slider">
<div class="slide"><img src="http://www.fotolovec.cz/foto/albums/Fauna/Ptaci/normal_Brhlik02.jpg" /></div>
<div class="slide"><img src="http://mw2.google.com/mw-panoramio/photos/medium/34484850.jpg" /></div>
</div>
<div id="navbar">
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
Pause
</div>
</div>
<!--slider end-->
JS:
<script type="text/javascript">
jQuery(function(){
$('#slides').slides({
preload: true,
preloadImage: 'loading.gif',
play: 2000,
pause: 2000,
hoverPause: true,
autoHeight: true,
effect:'slide',
container: 'slider'
});
});
</script>
function sliderPause(){
clearInterval($('#slides').data('interval'));
}``
In your jquery.slides.js file do a search for _this.stop(true);
It shows about 3-4 times, next & previous click.. and you will also see it showing for paginationLink.click
The problem i was having was the slider was stop sliding after click either previous, next or pagination. I needed the slider to restart.. so what i did was add a setTimeout to play()
_this.stop(true);
setTimeout(function ()
{ _this.play(true) }, 3000);