I am trying to use one of these two jquery plugins (awkward/Coda Slider 3) for sliding DIV content.
Everything works fine until I am try to set dynamic content (with js) after the plugin object has been created.
The DIVs show only content that loaded before the plugin created.
Any ideas or other DIV slider plug-in's for this goal.
Thanks.
the ajax working perfect I have checked it.
this is the load function for coda slider $('#slider-id').codaSlider();
and for "awkward" :
$(window).ready(function () {
$("#showcase").awShowcase(
{
content_width: 700,
fit_to_parent: false,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'fade', /* hslide/vslide/fade */
transition_speed: 500,
transition_delay: 300,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
Kevin Batdorf has improved on the Coda Slider with something called Liquid Slider which supports ajax and callbacks.
Read a tutorial on it here
And it is available on github.
Related
Thanks in advance for any help. I have been trying to resolve this for over 48hrs, no matter what I try I hit a wall.
I have a grid (table), I want the size to remain the same 940px across all device sizes and on any small devices for overflow-scroll so overflow can be side scrolled. I am using Webflow builder so I don't want to all custom code. Just hopefully modify the slick slider code or webflow settings.
Image of table -desktop view
I am using slick slider to turn it into a carousel, I disabled all touch/swipes so carousel was not slidable/swippable unless arrow were used.
Code inserted to disable:
swipeToSlide: false,
arrows: false,
draggable: false,
touchMove: false,
swipeToSlide: false,
touchThreshold:0,
Everything on desktop works as expected. However on mobile the carousel shows all three slides, even settings are set to 1
slidesToShow: 1,
slidesToScroll: 1,
AND
responsive: [
{
// tablet
breakpoint: 991,
settings: {
slidesToShow: 1
}
},
{
// mobile portrait
breakpoint: 479,
settings: {
slidesToShow: 1
}
}
]
However on mobile it continues showing all three slides on side scroll, arrows controls scroll one by one.
mobile you can see more than one slide- separated by green side cells
I want to only view one slide on mobile with overflow side scroll grid so you can see full grid but not all three slides.
Ready only: Webflow - Anastasia Stallcop Portfolio
https://preview.webflow.com/preview/anastasiastallcop-09463966869e63530c18a?utm_medium=preview_link&utm_source=designer&utm_content=anastasiastallcop-09463966869e63530c18a&preview=e4ad52b0551c0685b1b170f3fd29714d&pageId=62b67bbd0134354aa31af254&workflow=preview
Published:
https://anastasiastallcop-09463966869e63530c18a.webflow.io/case-study-template-copy-2
HEAD CODE
<style>
.text-contain {pointer-events: none;}
.list::-webkit-scrollbar {
display: none;
}
</style>
BODY CODE
<!-- NEW Dragable Slider -->
<style>
.item {display: inline-block;}
.list {display:block !important;}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
outline: none;
}
.slick-slide, .slick-slide *{ outline: none !important; }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script>
// when document is fully loaded
$( document ).ready(function() {
$('.list').slick({
dots: false,
speed: 700,
infinite: true,
swipe: false,
slidesToShow: 1,
slidesToScroll: 1,
swipeToSlide: false,
arrows: false,
draggable: false,
touchMove: false,
swipeToSlide: false,
touchThreshold:0,
responsive: [
{
// tablet
breakpoint: 991,
settings: {
slidesToShow: 1
}
},
{
// mobile portrait
breakpoint: 479,
settings: {
slidesToShow: 1
}
}
]
});
$('.slider-prev').click(function(){
$("#slider-id").slick('slickPrev');
});
$('.slider-next').click(function(){
$("#slider-id").slick('slickNext');
});
});
</script>
I figured it out by complete accident! I was testing a different slider (splide) I had copied from a youtubers website and noticed it would work on that one when I pasted my contents into it but not on my original slider.js, so I noticed the only different was the wrapper width and setting the parent container to overflow-scroll.
So the solution: I had set the wrapper width to wider than my slide/table (940px is my slider so I set wrapper to 1480). I also set overflow on the parent container and it finally worked however before I set it for mobile devices only it was creating a scroll bar with extra space on desktop so I modified desktop to 940px wrapper (remover overflow-scroll) and ipad to mobile devices only to 1480 (with overflow-scroll) - this removed scroll bar and extra space on desktop while being perfect for mobile. YAYYYYY!
"swiper": "^4.2.6"
Swiper demo
Swiper repository
Hello,
I have this slider setup:
const options = {
wrapperClass: 'slides-list',
slideClass: 'slide',
centeredSlides: true,
slidesPerView: 'auto', // Default slides per view
spaceBetween: 20,
loop: false,
navigation: {
prevEl: '.slider_btn--prev',
nextEl: '.slider_btn--next'
},
pagination: {
el: '.slider_pagination',
clickable: true,
},
speed: 300,
on: {
init: function () {
console.log('swiper initialized');
},
}
};
So i have this setup. Black border for the slider wrapper, red border for the slides list.
Works fine on mobile
But lets face the moment when all the slides width can fit into the slider wrapper, how can i centered then and maybe disable the drag option.
I dont know the slides widths, so right now in the example i have just 3 slides and this is the current behavior
And this one would be the desired one
I cannot use media queries because i dont know when the slides gonna fit in the container. so, Swiper has someway to achieve this ?
Thanks in advance.
I dont want to use slidesPerView: 3, as i said, the point is to be
able to check all the slides that we have, then if all of them can fit
in the container, center them. Not to force X number of slides into
the view
Javascript
const slider = new Swiper(element, {
slidesPerView: 'auto',
watchOverflow: true
});
slider.on('resize', function (instance) {
element.classList.toggle('.slider-active', instance.virtualSize > instance.size);
});
CSS
.swiper-wrapper {
justify-content: center;
}
.slider-active .swiper-wrapper {
justify-content: normal;
}
This way you apply css to center the slides when te slide wrapper does not overflow the container. And visa versa to reset
I put a slideshow on my Blogger (I downloaded a theme with slideshow) and I want to edit this theme. I'm stuck on the picture size of this slide.
I found this code:
var slider1 = new skewSlider('#main-slider', {
height: 450,
imgAlign: 'xMidYMid slice',
slidePercent: 50,
visibleSiblings: 1,
navigationArrows: false,
siblingsNavigation: true,
navigationDots: false,
slideShow: 5000,
navigationArrows: true,
slideMargin: 0,
skew:-15,
breakpoints: {
tablet: {
maxWidth : 1024,
slidePercent : 60,
height:350,
showCaption: false,
skew:0
},
phone: {
maxWidth : 600,
slidePercent : 70,
height:300,
skew:0
}
}
});
I found that the option slidePercent changes the size of photos in my slide show, but this is not everything I want. I need my slide to be scaled to fit in the slide bar, and this option only changes it to a percentage of the picture's full size.
How do I do it so that it fits the slide bar?
I find what I need.
On this:
imgAlign: 'xMidYMid slice',
I put this:
imgAlign: 'xMidYFull slice',
and
slidePercent: 40
So. You can lock this. Thank you.
I'm using this basic jQuery slider, but like it to stop after 1 cycle and not loop. I don't see that as one of the options for customization. Any idea how to customize on top of it?
http://www.basic-slider.com/
Thanks in advance!
This is what I have so far:
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
// w + h to enforce consistency
width : 660,
height : 235,
// transition valuess
animtype : 'slide',
animduration : 350, // length of transition
animspeed : 10000, // delay between transitions
automatic : true, // enable/disable automatic slide rotation
// control and marker configuration
showcontrols : false, // enable/disable next + previous UI elements
centercontrols : false, // vertically center controls
nexttext : 'Next', // text/html inside next UI element
prevtext : 'Prev', // text/html inside previous UI element
showmarkers : false, // enable/disable individual slide UI markers
centermarkers : false, // horizontally center markers
// interaction values
keyboardnav : false, // enable/disable keyboard navigation
hoverpause : false, // enable/disable pause slides on hover
// presentational options
usecaptions : false, // enable/disable captions using img title attribute
randomstart : false, // start from a random slide
responsive : false, // enable responsive behaviour
});
});
I have customized and added an option to stop this automatic slider after a loop. Slide change will stop at the last slide. option called 'rotate'. By default, its true. You need to set it as false to avoid next rotation.
Code will be like
$('#banner-fade').bjqs({
height : 320,
width : 620,
responsive : true,
automatic : true,
rotate : false,
});
You can find the updated plugin jquery file on the following links
Basic slider Normal
Minified
We are using Galleria library (http://galleria.io/) for dynamically generating slideshow from a set of user selected images. The user can also select a few options like height, width, transition speed, show/hide thumbnail carousel etc. and these settings are applied to Galleria options.
Now when user selects to hide carousel, I set relevant options which makes the thumbnails in the carousel disappear. However, the container div (with css class galleria-thumbnails-container) still occupies some whitespace. I tried changing a few css attributes of this class as well as galleria container w/o any luck.
Things I have tried:
After selecting div with class "galleria-thumbnails-container", change height to 0. No change observed.
After selecting div with class "galleria-thumbnails-container", change display to none. No change observed.
After selecting div with class "galleria-container notouch", reduce height by say 70 px. This reduced the height of main image in the slideshow.
I have gone through Galleria doc but they do not seem to have an option to handle this. So it has be a css hack. Any ideas?
Thanks.
You can turn off the thumbnails by using the following option on the script:
$('#galleria').galleria({
thumbnails: "false"
});
Documentation
thumbnails
type: Boolean or String
default: true
Took a look at your link and that space below your slider is made due to the fact that your images are not scaling according to the width/height you specified in your script, and also due to some spacing on the .galleria-stage class. Try this to fix it:
javascript
$('#slideshow_1749').galleria({
data_source: mmod_slideshow_data,
dummy: '/images/default.jpg',
showCounter: false,
width: 300, /* scale accordingly */
height: 300, /* scale accordingly */
autoplay: 3000,
carousel: false,
thumbnails: false,
showImagenav: false,
carousel: false,
thumbFit: false,
thumbMargin: 0,
imageCrop: "height"
});
CSS
.galleria-stage { /* modify line 17 of your galleria.classic.css stylesheet */
bottom:10px; /* define the bottom spacing, same as top/left/right */
}
Just a side note, but why use such a complex plugin for such a simple task? You can get a cleaner result by using the jQuery Cycle plugin.
I could not solve the problem with jquery / gallery.js -but this workaround does the job:
overrride styles dynamicly (adapt to your values needed):
function fixcss()
{
// dynamic overides of styles because all ties to change css with jquery
//galleria.js unsucsessful...
if (! thumbnails)
{
var sheet = document.createElement('style')
sheet.innerHTML = ".galleria-stage {bottom: 60px !important; } \
.galleria-info {bottom: 0px !important } \
.galleria-thumbnails-container {height: 0px \
!important;}";
document.body.appendChild(sheet);
}
if ( ! showInfo ){
var sheet = document.createElement('style')
sheet.innerHTML = ".galleria-stage {bottom: 80px !important; } \
.galleria-info {bottom: 10px !important }";
document.body.appendChild(sheet);
}
};
$(document).ready(function() {
Galleria.loadTheme('++resource++fgrcon.slideshow/galleria.classic.js');
Galleria.configure({
transition: 'fade',
transitionSpeed: transitionSpeed,
autoplay: galleryduration,
lightbox: lightbox ,
showInfo: showInfo ,
showCounter: showCounter ,
showImagenav: showImagenav,
thumbnails: thumbnails ,
height: galleryheight
});
fixcss();
Galleria.run('#galleria');
}
);