My website is long. Around the middle of the page, I use Swiper to display the references. It's currently set to autoplay, but the problem is that I'd like it to always start from the first slide when I see it. Is it possible?
code:
var referenceSwiper = new Swiper('.reference-swiper', {
slidesPerView: 3.2,
spaceBetween: 20,
// centeredSlides: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
runCallbacksOnInit: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
991: {
slidesPerView: 3.2,
},
320: {
slidesPerView: 1.2,
spaceBetween: 16,
slidesOffsetAfter: 16,
slidesOffsetBefore: 16,
},
}
});
Related
is it possible to change direction of a splide slider in responsive? when i want to change the direction of the thumnail slider in responsive the slider crash.
var secondarySlider = new Splide("#splidev2", {
direction: "ttb",
type: "loop",
height: "100%",
fixedWidth: 100,
fixedHeight: 100,
isNavigation: true,
gap: 10,
pagination: false,
arrows: true,
focus: "center",
updateOnMove: true,
rewind: false,
breakpoints:{
1199: {
perPage: 2,
gap : '1.5rem',
height : '24rem',
},
991: {
direction: "ltr",
},
}).mount();
var primarySlider = new Splide("#splide", {
type: "fade",
pagination: false,
cover: true,
arrows: false,
});
primarySlider.sync(secondarySlider).mount();
https://splidejs.com/guides/options/#direction
From the given documentation I got this = "You can update responsive options by breakpoints or by passing an object to Splide#options..."
You can use Slide#options, if breakpoints not working.
I am using slick slider . I have managed setting slide to show item 4 but when user upload only two slick item it align to right of container but i need to it align left side of container.
$('#blog-slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: false,
// autoplaySpeed: 0,
// speed: 5000,
infinite: true,
centerMode: true,
loop: true,
pauseOnHover: false,
cssEase: 'linear',
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1
}
}
]
});
[related image][1]
You can check the number of slides before initializing the slider and if slide number is greater than 4 you can enable centermode which will align your slide on left or center. Check fiddle here
var enableCenterMode = false;
if($('.single-slide').length > 4){
enableCenterMode = true;
}
JSFIDDLE
if you are adding slides dynamically you can also use slickSetOption and check the slide length and enable or disable centermode.
Problem:
I have a problem getting the event to use only one of the rows and not invade the others like it does now:
Objetive:
My intention is to do single row events, there will only be one event for each row something like this:
I tried to do it with css but fullcalendar moves the event to the right and there is no ccs tag that identifies it to be able to move it with css, instead it uses inset and I don't really understand how to achieve it.
There are 2 alternatives:
Find a way for the rows to adapt to the size of the events.
Somehow move the event that fullcalendar moves to the right.
The problem is with my little knowledge, I don't know how to do it.
Code with events thinned:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendario');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
timeZone: 'America/Guayaquil',
headerToolbar: {
start: 'today prev,next',
center: 'title',
end: 'dayGridMonth,timeGridWeek,listDay'
},
views: {
timeGrid: {
type: 'timeGrid',
//slotEventOverlap: false,
displayEventEnd: true,
duration: { days: 7 },
allDaySlot: false,
slotDuration: '00:30:00',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
hour12: false,
meridiem: false
},
slotLabelInterval: '00:30:00',
slotMinTime: '07:00:00',
slotMaxTime: '18:30:00',
expandRows: true,
buttonText: 'Semana',
nowIndicator: true,
}
},
//Funciones
dateClick: function(info){
alert('Dia seleccionado: ' + info.dateStr);
alert('Vista Actual: ' + info.view.type);
info.dayEl.style.backgroundColor = '#F2F2F2';
cFormAñadir('añadir', 'abrir');
},
//Eventos
eventSources: [{
events: [
{
title: 'Consulta ginecologia',
start: '2021-10-05T14:00:00',
duration: '2021-10-05T14:00:00',
allDay: false,
color: "#ed4245",
textColor: "#FFFFFF",
forceEventDuration: true
},
{
title: 'Consulta obstetricia',
start: '2021-10-05T13:00:00',
end: '2021-10-05T13:00:00',
allDay: false,
color: "#3AA95E",
textColor: "#FFFFFF"
},
{
title: 'Ecocardiograma',
start: '2021-10-05T13:30:00',
end: '2021-10-05T13:30:00',
allDay: false
},
{
title: 'Consulta obstetricia2',
start: '2021-10-06T13:00:00',
end: '2021-10-06T13:00:00',
allDay: false,
color: "#3AA95E",
textColor: "#FFFFFF"
},
],
color: "#FAA61A",
textColor: "#FFFFFF"
}]
});
calendar.render();
});
.fc-timegrid-col-events .fc-timegrid-event-harness{
height: 34px!important;
width: 100%!important;
}
.fc-timegrid-event-harness .fc-timegrid-event {
position: static;
}
.fc-timegrid-event-harness .fc-timegrid-event .fc-event-main {
line-height: 15px;
}
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.9.0/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.9.0/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calendario"></div>
The problem is that your events all have the same start and end times. As far as fullCalendar is concerned, they take up 0 minutes. It's the same as if you hadn't specified an end property at all.
Of course this would make them undisplayable, so instead fullCalendar gives them a default duration of 1 hour - which is why they overlap into the next slot.
To solve this you can either:
Specify an end time 30 minutes later than the start time for each event.
Or
Change the defaultTimedEventDuration from 1 hour (the default) to 30 minutes, as I've done in the demo below.
In either case, your custom CSS is not required.
Documentation: https://fullcalendar.io/docs/defaultTimedEventDuration
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendario');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
timeZone: 'America/Guayaquil',
headerToolbar: {
start: 'today prev,next',
center: 'title',
end: 'dayGridMonth,timeGridWeek,listDay'
},
defaultTimedEventDuration: "00:30",
initialView: "timeGridWeek",
views: {
timeGrid: {
type: 'timeGrid',
//slotEventOverlap: false,
displayEventEnd: true,
duration: { days: 7 },
allDaySlot: false,
slotDuration: '00:30:00',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
hour12: false,
meridiem: false
},
slotLabelInterval: '00:30:00',
slotMinTime: '07:00:00',
slotMaxTime: '18:30:00',
expandRows: true,
buttonText: 'Semana',
nowIndicator: true,
}
},
//Funciones
dateClick: function(info){
alert('Dia seleccionado: ' + info.dateStr);
alert('Vista Actual: ' + info.view.type);
info.dayEl.style.backgroundColor = '#F2F2F2';
cFormAñadir('añadir', 'abrir');
},
//Eventos
eventSources: [{
events: [
{
title: 'Consulta ginecologia',
start: '2021-10-05T14:00:00',
duration: '2021-10-05T14:00:00',
allDay: false,
color: "#ed4245",
textColor: "#FFFFFF",
forceEventDuration: true
},
{
title: 'Consulta obstetricia',
start: '2021-10-05T13:00:00',
end: '2021-10-05T13:00:00',
allDay: false,
color: "#3AA95E",
textColor: "#FFFFFF"
},
{
title: 'Ecocardiograma',
start: '2021-10-05T13:30:00',
end: '2021-10-05T13:30:00',
allDay: false
},
{
title: 'Consulta obstetricia2',
start: '2021-10-06T13:00:00',
end: '2021-10-06T13:00:00',
allDay: false,
color: "#3AA95E",
textColor: "#FFFFFF"
},
],
color: "#FAA61A",
textColor: "#FFFFFF"
}]
});
calendar.render();
});
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.9.0/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.9.0/main.min.js"></script>
<div id="calendario"></div>
Hi im trying to get my slider responsive, i have two issues, one, i tried changing the row width in the editor code and still doesnt change, also id like to know if anyone knows how to remove the video controls with this plugin.
Slick slider supports responsive breakpoints. This example below is taken directly from their documentation:
$('.yoursliderclass').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
I have implemented slick slider which works fine without resizing the browser. But when I resize the browser to 1024 then the responsive breakpoint settings doesn't work.
jQuery:
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
variableWidth: true,
variableHeight: true,
mobileFirst: true,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
centerMode: false
}
}]
});
Demo -- https://jsfiddle.net/squidraj/hn7xsa4y/4/
Add this settings to your code;
$(".slides").slick({
autoplay:true,
mobileFirst:true,//add this one
}
Add slidesToShow and slidesToScroll option in each breakpoint.
{
breakpoint: 786,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 568,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
First of all, "variableHeight" option does not exist in Slick Carousel.
To solve your issue, remove variableWidth: true, because this will make your slides take full with of the carousel.
And you can also not use "mobileFirst" option if your page is not using this methodology.
So finally your config should be like this, below
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
mobileFirst: true, //optional, to be used only if your page is mobile first
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
centerMode: false,
}
}]
});
Best Regards.
This did the trick for me.
function resetSlick($slick_slider, settings) {
$(window).on('resize', function() {
if ($(window).width() < 320) {
if ($slick_slider.hasClass('slick-initialized')) {
$slick_slider.slick('unslick');
}
return
}
if (!$slick_slider.hasClass('slick-initialized')) {
return $slick_slider.slick(settings);
}
});
}
slick_slider = $('.client-logos');
settings = {
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
prevArrow: '',
nextArrow: '',
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
};
slick_slider = $('.container');
settings = {
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
prevArrow: '',
nextArrow: '',
pauseOnHover: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
};
slick_slider.slick(settings);
resetSlick(slick_slider, settings);
Add this to your js and call the slider as shown.
and in your css make the slide display: inline-block; that's it. will work on all responsive screens.
tl;dr When multiple sliders on page changing $('.selector').slick({...}) order helped
I had similar issue. I don't understand why but slidesToShow: 2 didn't take effect on mobile device for me although if you resize it back and forth it took effect. mobileFirst:true helped but broke desktop. Adding both slidesToShow and slidesToScroll didn't help. But when I placed initialization of sliders in the same order as they appear on the page it worked. I don't understand why... I don't understand how to fix this if there're multiple pages with different slider locations...
mobileFirst:true,//add this to your JavaScript file and it should work :)
I am not sure why your js template is failing with below:
responsive: [{
breakpoint: 1024,
I would follow up with their documentation, community, or file a bug.
In any case it is better practice to use CSS3 media queries for this. One approach; nest a div around the slider and position it relative, scale it and it's child elements with width: 100%; and declaring max and min width's within defined resolutions. This should start you in the right direction. Make sure to also make proper use of meta viewport.
First, you use old version of slick in your example. This verson doesn't support mobileFirst property.
Second, you must remove variableWidth if you want to use slidesToShow property.