I have a horizontal scrolling carousel:
_gotoNext: function (that) {
//tjobbe - put funciton here to check if there is anything else after the last slide, then stop / disable the gotonext. must only scroll one if only one is available (or 2). same for go to prev
that.$element.find('.mediaCarousel').trigger("next", false);
},
//This method tells the mediaCarousel to go to the previous slide.
_gotoPrev: function(that, callback) {
that.$element.find('.mediaCarousel').trigger("prev", false);
},
http://jsfiddle.net/YVCTx/
I need it to STOP or at least disable the next button when it gets to the last item. If there is an un-even number I also need it to only scroll one or two items, or let it do the full three.
My current code doesn't seem to be paying attention to the built in "infinite: true (or false)" option.
For example, I have 7 items at the moment, and I scroll 3 at a time. I'd like to stop at the third scroll, so that the second scroll only goes as for as the items in the list.
Any ideas if this is possible?
It seems that there is a circular and an infinite option which you can set.
I would imagine one of those would do what you want (most probably the infinite one):
$('#carousel').carouFredSel({
circular: true, // Determines whether the carousel should be circular.
infinite: true, // Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
responsive: false, // Determines whether the carousel should be responsive. If true, the items will be resized to fill the carousel.
direction: "left", // The direction to scroll the carousel. Possible values: "right", "left", "up" or "down".
width: null, // The width of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable widths), "auto" (measure the widest item) or a percentage like "100%" (only applies on horizontal carousels)
height: null, // The height of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable heights), "auto" (measure the tallest item) or a percentage like "100%" (only applies on vertical carousels)
align: "center", // Whether and how to align the items inside a fixed width/height. Possible values: "center", "left", "right" or false.
padding: null, // Padding around the carousel (top, right, bottom and left). For example: [10, 20, 30, 40] (top, right, bottom, left) or [0, 50] (top/bottom, left/right).
synchronise: null, // Selector and options for the carousel to synchronise: [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: ["#foo2", true, true, 0]
cookie: false, // Determines whether the carousel should start at its last viewed position. The cookie is stored until the browser is closed. Can be a string to set a specific name for the cookie to prevent multiple carousels from using the same cookie.
onCreate: null // Function that will be called after the carousel has been created. Receives a map of all data.
});
Source: documentation
Related
In Swiper demos, slides snap to the left of the screen until you get to the final slides, which are prevented from snapping to left because (I presume) Swiper doesn't want to show whitespace down the righthand side:
Slide 10 will never snap to the left side
https://swiperjs.com/demos/120-slides-per-view-auto.html
In my opinion it feels like a bug to the user, especially when you trigger slide to slide 10 and it only pops into the right side.
The workarounds I've found are to either add a blank slide, or to add margin-right to the final slide, so then slide will snap to the left side:
.swiper-slide:last-child {
margin-right: calc(100vw - 300px);
}
Add margin-right to last slide
https://codepen.io/kmturley/pen/ExxrGgw
Add blank slide at end
https://codepen.io/kmturley/pen/JjjzKrK
Use loop functionality and then hide duplicates
https://codepen.io/kmturley/pen/oNNVLxL
Is there a better or built-in way to do? this without having to use a workaround?
I want to change this spacing dynamically later and if you change it manually, then you have to call swiper.update() causing layout updates. Also my current workaround requires you to know the width of the slides, or use custom javascript to calculate the widths. So a built-in or responsive solution would be preferable!
try to add loopedSlides: 8, and remove margin-right: calc(100vw - 300px);
var container = document.getElementById('container');
var content = document.getElementById('content');
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
autoplayDisableOnInteraction: false,
loopedSlides: 8,
});
Your current workaround probably is quite optimal and I don't htink there is any built in way to acheave what you are trying to do. However you could consider to use loop: true option and this could give a better user experience.
https://codepen.io/rentodesign/pen/gOOqNwo
I purchased a slider plugin called MightySlider http://codecanyon.net/item/mightyslider-responsive-multipurpose-slider/5898508 I need a simple automated carousel that scrolls smoothly from the beginning to the end and then either loops or reverses direction. I've played with the settings enough to allow for a smooth scroll from beginning to end by setting the 'speed' and the 'cycling: {pauseTime}' parameters to be equal. No I have a delay of 20s (equal to the speed of the slider).
It's a long shot but can anyone help with the parameters to this or help me write a javascript hack to trigger the slider to start moving on page load or 1-2s after? Alternatively, could anyone recommend a different slider?
Site is here: http://smmcnyc.com/work/1919market/
JSFiddle is here: https://jsfiddle.net/fhhdxnum/
$(".frame").mightySlider({
// Mixed options
moveBy: 9000, // Speed in pixels per second used by forward and backward buttons.
speed: 20000, // Animations speed in milliseconds. 0 to disable animations.
easing: 'linear', // Easing for duration based (tweening) animations.
startAt: 10000, // Starting offset in slides.
startRandom: 0, // Starting offset in slides randomly, where: 1 = random, 0 = disable.
viewport: 'fill', // Sets the cover image resizing method used to fit content within the viewport. Can be: 'center', 'fit', 'fill', 'stretch'.
autoScale: 0, // Automatically updates slider height based on base width.
autoResize: 0, // Auto resize the slider when active slide is bigger than slider FRAME.
videoFrame: null, // The URL of the video frame to play videos with your custom player.
preloadMode: 'nearby', // Preloading mode for slides covers. Can be: 'all', 'nearby', 'instant'.
// Scrolling
scrolling: {
scrollSource: null, // Selector or DOM element for catching the mouse wheel scrolling. Default is FRAME.
scrollBy: 0, // Slides to move per one mouse scroll. 0 to disable scrolling.
hijack: 300 // Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
},
// Pages
pages: {
pagesBar: null, // Selector or DOM element for pages bar container.
activateOn: null, // Event used to activate page. Can be: click, mouseenter, ...
pageBuilder: // Page item generator.
function (index) {
return '<li>' + (index + 1) + '</li>';
}
},
// Automated cycling
cycling: {
cycleBy: 'pages', // Enable automatic cycling by 'slides' or 'pages'.
pauseTime: 20000, // Delay between cycles in milliseconds.
loop: 1, // Repeat cycling when last slide/page is activated.
pauseOnHover: 0, // Pause cycling when mouse hovers over the FRAME.
startPaused: 0 // Whether to start in paused sate.
},
});
Advice or a workaround would be very helpful!
Try nivo slider.
If you bought slider you can ask the customer support to do this.
Change cycling pouse time:
cycling: {
cycleBy: 'pages',
pauseTime: 1000,
or if this does not suit you:
I'm not sure if this is the best way, but this is how you can do this.
You will need to edit mightyslider.js
scroll down to function requestHandler and after timestamp=_now(); add (line ~2728) . These lines will start slide cycling if onLoadStart is true.
if(o.cycling.onLoadStart){
o.cycling.onLoadStart += -50;
if(o.cycling.onLoadStart == 0 || o.cycling.onLoadStart == true){
cyclingActivate();
o.cycling.onLoadStart = false;
}
}
add this value into mightySlider.defaults array line ~6648
// Automated cycling
cycling: {
.........................
startPaused: false,
onLoadStart: true
}
now you can pass in additional option into mightySlider
$(".frame").mightySlider({
........
// Automated cycling
cycling: {
..........
startPaused: 0,
onLoadStart: 1000 // true -- start immediately after load,
// false --- with delayed start,
// or enter time in miliseconds which is iess than delayed start.
}
...............
});
I would like to ash here a question, which I asking already in the developers forum of swiper, too. So don't be confused. If a solution is/was found, I will close/mark both.
At the moment I want for a project a horizontal scrolling sidebar and a vertical scrolling footer. (Swiper based)
But see self what happens if you switch from horizontal (1) footer to a vertical (2) one.
Video 1 (direction both horizontal - not wanted)
Video 2 (footer direction vertical, wanted! - not works)
As you can see, on the simplified example (Video 2):
If I use direction:vertical on the second swiper-container it breaks the result. Where the HEIGHT of "swiper-slide" should be 226px, appears now a HEIGHT of 2408px and a MARGIN-BOTTOM of 100px.
I really can't understand what's going wrong here.
ConfInit
var swiper = [];
$('.swiper-container').each(function(index){
var $el = $(this);
var sParams = [{
speed: 400,
spaceBetween: 100,
allowSwipeToNext: false, // for event controlled swipes
allowSwipeToPrev: false // for event controlled swipes
},
{
speed: 400,
spaceBetween: 100,
allowSwipeToNext: false, // for event controlled swipes
allowSwipeToPrev: false, // for event controlled swipes
direction: 'vertical'
}
];
I have faced the same issue, solved by adding height: 100vh declaration to swiper container.
Finding
height property is must
NOTE: % does not work
I'm using the great onepage_scroll plugin for a site. Below a set threshold the page reverts to normal scroll behaviour. However at this point - when I try to use scrollTop() to get the distance from the top of the page it always returns 0.
var vph = $(window).height();
var responsiveThreshold = 640;
$(".onepage_scroll").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: false, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: scrollCatchBefore, // This option accepts a callback function. The function will be called before the page moves.
afterMove: scrollCatchAfter, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: responsiveThreshold // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
});
// Fix menu if page is too small
if(vpw<responsiveThreshold) {
$("#navigation").hide();
/* Every time the window is scrolled ... */
$('body').scroll( function(){
var scrollPos = $('html').scrollTop();
console.log(vph);
console.log(scrollPos);
if(scrollPos > vph) {
$("#navigation").fadeIn();
} else {
$("#navigation").fadeOut();
}
});
}
I've also tried both of the following:
$('body').scrollTop();
$('.onepage_scroll').scrollTop();
$(window).scrollTop();
Looking at how onepage_scroll works, it is not moving the body or the divs in a typical manner. So scrollTop is not the solution here.
It is using translate3d on the following div in question...
<div class="main onepage-wrapper">
With the following modified styles as the plugin operates...
-webkit-transform: translate3d(0px, -100%, 0px);
This answer may be of use to you...
Get translate3d values of a div?
To know current index of section:
var nCurSect = $("section.active", ".main").data("index");
Then you can just multiply it to the screen height and get offset.
I have created numerous slickgrids, but this is the first one that I am creating that I need to have the columns not be resizable and reorderable (draggable). What I really need is for my columns to fit my viewport at all times but not be resizable/reorderable, and not extend horizontally during a screen resize (increase or decrease).
I have found that if I put this into the column options. :'
resizable: false
This will stop them from being resized but upon doing this it resizes my columns on page load to width I specified per column. Which is normally what I would want, but I have a specific width of 1300px for my viewport. So, if I set my pixels just right the grid will behave nicely in the viewport and look great. However, this application that I am working on requires the ability to minimize or maximize the screen, upon doing so my columns which are now set to a specific width remain that width and a horizontal scrollbar appears pushing my columns past the 1300px range.
If I remove column widths and keep forcefitcolumns and then my columns are really tiny and it just looks terrible.
Example of one of my columns. :
{ id: "Mode", name: "Mode", field: "Mode", width: 125, sortable: true, formatter: TaskNameFormatter, editor: Slick.Editors.Text, resizable: false },
Example of my grid options. :
var GridOptions = {
showHeaderRow: true,
showHeaderRow: true,
headerRowHeight: 30,
explicitInitialization: true,
enableCellNavigation: true,
enableTextSelectionOnCells: true,
forceFitColumns: true,
multiColumnSort: true,
topPanelHeight: 25,
autoHeight: true,
enableColumnReorder: false
};
Example of my grid div. :
<div id="slickGrid" class="grid-body" style="min-width: 800px; max-width: 1300px; height: auto;"></div>
And obviously I have the grid resize. :
$(window).resize(function () {
Grid.resizeCanvas();
});
I am just wondering how you handle this situation, basically I need my columns to fill the viewport horizontally and maintain that size even during a window resize. Thoughts? Has anyone defeated this issue before? If I could just figure out how to dynamically keep my columns the appropriate size for the viewport I could call that again during a window resize.
***Note I have also tried the Grid.autosizeColumns and setting the min-width of each column and these do not work either.
https://github.com/mleibman/SlickGrid/issues/17
Found this seems to be doing the trick. :
You need to change the conditional for column resize attribute:
!c.resizable
to:
(!c.resizable && options.forceFitColumns !== true)
Per user tobiasstrebitzer