I have created an owl carousel using the following settings.
$('.owl-carousel').owlCarousel({
autoWidth:true,
loop:false,
items:25,
slidesToShow: 1,
mergeFit:true,
slideBy:1,
center:false,
dots: false,
merge:true,
lazyload:false,
nav:true,
})
An empty space is created at the end of my carousel.I have tried adding margin left and right to individual card items.But none seem to solve my issue.
I have created a codepen. We can see a empty space when we slide to the last item in the carousel.
set autoWidth to false
$('.owl-carousel').owlCarousel({
autoWidth:false,
loop:false,
items:25,
slidesToShow: 1,
mergeFit:true,
slideBy:1,
center:false,
dots: false,
merge:true,
lazyload:false,
nav:true,
})
Related
I want the slider to use centered slides, but not in the first and the last ones.
When I enable the centered slides property "centeredSlides: true" and set also "slidesPerView: 1.2" I get the correct result on the middle slides, but the first and the last I want to be the left or rigth position respectively.
this.SlideOptionsPaths =
{
initialSlide: 0,
centeredSlides: true,
slidesPerView: 1.2,
slidesPerGroup: 1,
spaceBetween: 10,
//slidesOffsetBefore: -82,
//slidesOffsetAfter: 160,
speed: 400,
fadeEffect:
{
crossFade: true
}
};
This is the actual behavior:
And i need the first image to be aligned left...
When swiping trow the cards (the middle cards) I need this behavier (that is correctly happening):
By the time the question was posted there was no easy way to achieve this result. But since Swiper version 5.2 a new centeredSlidesBounds parameter was added to the API.
All you need to do is use the following parameters in the options object:
{
centeredSlides: true,
centeredSlidesBounds: true
}
Based on the docs what about using:
{
initialSlide: 1
}
which will push the slide along one so it has something to fill the gap, or
{
loop: true,
}
which will start at the beginning but show the end wrapped around.
Because the option your asking isn't supported as far as I know.
Just wondering if anyone can help please.
I'm using Slick Slider on one my WordPress sites, and the slider is currently sliding from right to left. I'd like the slider to slide from left to right when it changes slides.
Does anyone have any suggestions please?
<script type="text/javascript">
$(document).ready(function(){
$('.fadex').slick({
dots: false,
speed: 500,
autoplay: true,
autoplaySpeed: 3500,
infinite: true,
centerMode: false,
initialSlide: 0,
arrows: true,
});
});
</script>
To solve this problem requires you to change the style of the left value
Because it adds a negative to the single-product-image class
Inside the slick.js file at line 866
Add a new line and add this condition
if($("html").attr("dir") == 'rtl'){ var newE = t.slideWidth * o; }else{ var newE = t.slideWidth * o * -1; }
And change this condition
(e = t.slideWidth * o * -1)
to this
(e = newE)
Then the page orientation will be relied upon in the case of RTL or LTR.
rtl : [slick-slider rtl=”true”] (for rtl mode. By default value is “false”. Options are “true OR false”).
Simply use the options provided. By default value is “false”, change this to true, or vice versa to change the direction.
<script type="text/javascript">
$(document).ready(function(){
$('.fadex').slick({
dots: false,
speed: 500,
autoplay: true,
autoplaySpeed: 3500,
infinite: true,
centerMode: false,
initialSlide: 0,
arrows: true,
rtl: true,
});
});
</script>
Is it a possible to keep grid's horizontal scrollbar (not a window scroll) called by
autowidth: true,
shrinkToFit: false,
After column resized
cmTemplate: { compact: true, autoResizable: true },
Here is jsfiddle.
Steps:
Move left border of result window to right to get grid's scrool (see pix1), then
double click the column border line - scroll bar become a lost.
My real table is too wide, so I need to save grid's scrollbar.
Has found an answer by using the following option
autoResizing: { adjustGridWidth: false},
I want to remove the header of a child window using TIDESDK. I don't know how to use xml settings for a child window. I was successful in creating tiapp.xml file for the parent. Now, I am trying to use the Ti.UI.UserWindow APIs to remove the borders but to no avail.
Here is my unsuccessful piece of code:
var window1 = Ti.UI.createWindow('app://src/filename.html');
window1.setUsingChrome(false);
window1.setSize(400,200);
window1.setTransparency(0.5);
Every other property is accurately getting applied but the 'setUsingChrome' property shows no effect. Can someone advice how to use this property or to create a tiapp.xml file for tidesdk so as to remove the header from the CHILD window
YESSss....found out finally, but realized after finding that it was kind of silly not to try this earlier.
var window1 = Ti.UI.createWindow({
url: 'app://src/client/notifications/notifications.html',
title: "Reminders",
width: 400,
height: 200,
maximizable: false,
minimizable: false,
closeable: false,
resizable: false,
fullscreen: false,
maximized: false,
minimized: false,
usingChrome: false,
topMost: true,
visible: true,
transparentBackground: false,
});
Setting either the transparentBackground property or usingChrome property removes the header and the borders(if present).
I am trying to disable the controlNav and directionNav controls within flexslider. I am using the risen theme from themeforest and the theme is using jquery.flexslider-min.js. If I use the full jquery.flexslider.js there is the following options that I can disable controlNav or directionNav.
How can I either disable this from my functions.php or the jquery.flexsliders-min.js?
$.flexslider.defaults = {
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade", //String: Select your animation type, "fade" or "slide"
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
// Usability features
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// Primary Controls
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
// Secondary Navigation
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: "Pause", //String: Set the text for the "pause" pausePlay item
playText: "Play", //String: Set the text for the "play" pausePlay item
// Special properties
controlsContainer: "", //{UPDATED} jQuery Object/Selector: Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be $(".flexslider-container"). Property is ignored if given element is not found.
manualControls: "", //{UPDATED} jQuery Object/Selector: Declare custom control navigation. Examples would be $(".flex-control-nav li") or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// Callback API
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){} //{NEW} Callback: function(slider) - Fires after a slide is removed
}
Change to
controlNav: false,
directionNav: false,
$('#.slider').flexslider({
controlNav: false,
directionNav: false
});
see the documentation here.
As Kee said, but this is how to do it when you load the slider instead of editing the source JS file:
$('#.flexslider').flexslider({
controlNav: false,
directionNav: false
});