I am using carousel.js to slide content (manufacturers image).
Currently it is sliding only one image after a few seconds.
I want to know if there is any property in the carousel.js that like I can specify number of images to slide.
The script used to slide:
new Carousel('carousel-wrapper-manuf', $$('#carousel-content-manuf .slide'), $$('a.carousel-control'),
{
duration: 0.2,
visibleSlides : 6,
circular: true,
wheel: true,
auto: true
}
);
Related
I'm having an issue with owlcarousel. When I use large images with items:1 everything works well and each slide contains 1 image. But when I use smaller images the items:1 option is ignored and the images display 4 per slide.
owlcarousel is version 2.3.4 as are the corresponding CSS files.
$(document).ready(function(){
$(".news-post-gallery").owlCarousel({
navigation : false, // Show next and prev buttons
autoplay:false,
items: 1,
loop:false,
margin: 10,
center: true,
nav: true,
navText: [
"<div>Left</div>",
"<div>Right</div>"
],
responsive:{
0:{
items:1,
}
}
});
});
My first guess is that this is a CSS issue. Mind you even the small images are not that "small", the large images that I used were like half my screen width.
Edit: navText is being ignored as well when small images are used.
The issue was another carousel being initialized targeting the owl-carousel class. This ended up initializing the one I needed with the wrong settings. The carousels initializations were coming from different templates so the result was only visible in the source once the page was loaded.
Adding $(...).owlCarousel('destroy'); before i initialized mine solved the problem.
I have a question about Swiper and how to display a loading animation in a responsive environment.
It's Swiper Version: 3.4.2.
What I did
Hi, I have set the .swiper-container to
{ width: 100%; height: auto; }
because the site is responsive.
Otherwhise I use the standard swiper.min.css and swiper.min.js with these settings:
autoheight: true,
grabCursor: true,
slidesPerView: 1,
autoHeight: true,
keyboardControl: true,
paginationType: 'fraction',
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
Expected Behavior
I would like to have the container set to the height of the first image and have a loading animation displayed in the middle of the container until the images are loaded.
Actual Behavior
The swiper-container is only the height of the arrows. Then next thing you see is the cropped first image (the size of the container which is the size of the arrows), and only after that, the container is set to the size of the first image.
I would really appreciate some help.
Thanks
Stefan
Have you tried Lazy Loading?
The slideshow(/browser) will be unable to determine your slides height until the images have loaded, so you may have to manually determine the height of the image on the first slide and initialize the container with that.
See the Images Lazy Loading demo.
I'm using Flexslider for a project of gallery and I want to modify the navigation system.
On keypress/swipe/click on arrows, four images displayed disappear and are replaced by four new.
Is it possible to modify the behavior of the navigation to move images one by one ?
Thank you very much for your help !
Z.
You may want to use property move, which is defined as
//{NEW} Integer: Number of carousel items that should move on
animation. If 0, slider will move all visible items.
So, your code will look like this
$(window).load(function() {
$('.slidewidget1').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 210,
controlNav: false,
itemMargin: 0,
slideshow: false,
move: 1,
minItems = 4,
maxItems = 4
});
});
plus, of course, your customization of width, etc.
Documentation
I have an image which I am displaying with the help of image view using Sencha Architect 2. I am able to get a tap event on the image. But I don't know how to save the image to phone when the image is tapped.
I did a Google search for this but could not find the proper documentation or example.
Can anyone help me please.
Here is the code I am trying
tap: function(img, e, options) {
var overlay = Ext.Viewport.add({
xtype: 'panel',
modal : true,
hideOnMaskTap : true,
hidden : true,
width : 100,
height: 40,
items :
[
{
xtype:'button',
text:'Download'
}
],
});
overlay.showBy(img);
}
When I click on Download button the image should get saved to SD card (phone memory) or local hard drive.
can some one help me ?
Thanks.
To get the image name:
I am guessing that you are adding the image with the xtype img?
If so image src is img.src
Otherwise you will need to add the following command to see what the object contains.
console.dir(img);
Save the image:
You will be able to save the image to localstorage if the source is base64.
JavaScript will not write to SD Card or alike.
Other than that you can cache the image.
If you are using PhoneGap this will be possible.
Problem
I use the flexslider carousel to a number of images to show. What I want now is, when the browser has a certain width drop a break, which for example is incidental to 768px 2 images are shown. Currently you see an image at a certain width but half and wants to these points with javascript / jquery to give many pictures there must fully show.
So my question is, how I can make an if statement for when the browser width is for example 768px width, is must show two images...
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 320,
itemMargin: 0,
minItems: 2,
maxItems: 5,
start: function(slider){
$('body').removeClass('loading');
}
});
Check code on JSFiddle
You can use an if statement for widths like this:
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
... and to contain that, you might like to combine your document ready function with a window resize function.
$(document).ready(myfunction);
$(window).resize(myfunction);
function myfunction() {
// Pace the if/else here, do whatever
}
In terms of showing two images it think you should be able to be achieve that by setting slide widths and offsets in the flexslider function - or with css. here are the options i'm talking about:
itemWidth: 490, // or whatever is 1/2 of your width
itemMargin: 30, // experiment here!
minItems: 1, // or 2
Here's an edited version of your JS fiddle demo! http://jsfiddle.net/tM2a8/