Above is the slider from Airbnb. Is there a way to get a similar effect with Swiper?
For the first slide, there is a blank space on the left and start
of the next slide.
For the middle slide, there is the start and end of previous and
next slides.
For the last slide, there is a blank space on the right and end of the previous slide on the left.
Just set the slidesPerView option using decimal places, eg:
var swiper = new Swiper('.swiper-container', {
...
// this shows a bit of the previous/next slides
slidesPerView: 1.1,
centeredSlides: true,
spaceBetween: 10,
...
});
As long as you don't set the slideshow to loop then the first and last slides will have extra space instead of part of another slide.
It works pretty well, this how I did #Marc Mintel
To display part of prev slide & part of next slide :
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1.1,
centeredSlides: true,
spaceBetween: 20,
});
To display part of next slide only : (no centeredSlides)
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1.1,
spaceBetween: 20,
});
Related
I have implemented tradingview's lightweight chart in my app, and the chart looks like this. There is a dotted horizontal line for the last price.
Is it possible to hide the horizontal line?
When creating the series, you can set the priceLineVisible option to false to disable that line.
const mainSeries = chart.addLineSeries({
priceLineVisible: false,
});
Documentation: https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricelinevisible
For removing ltp dotted line in your chart you should set priceLineVisible to false in addAreaSeries.
var areaSeries = chart.addAreaSeries({
priceLineVisible: false,
topColor: this.config.topColor,
bottomColor: this.config.bottomColor,
lineColor: this.config.lineColor,
lineWidth: this.config.lineWidth,
});
In order to have the edges of the previous/next carousel items to show within Slider, I am reducing the .swiper-slide size. There are two ways of achieving this that I have tried:
setting .swiper-slide width to 90%
setting the slidesPerView param to 1.1
Both work nicely, but the final two items in the carousel show stange visual artefacts. The background of the container appears to overlap and intersect the slider. Images below (first in each example is as it is expected to render, second is with glitch). The visual glitch is cleared with a click, but still undesirable:
These are my Slider params
const params = {
slidesPerView: 3,
spaceBetween: 50,
speed: 400,
centeredSlides: true,
initialSlide: this.props.latestQuestionIndex,
slideToClickedSlide: true,
breakpoints: {
768: {
slidesPerView: 3,
spaceBetween: 30
},
425: {
slidesPerView: 1.1,
spaceBetween: 10
}
},
on: {
slideChange: () =>
this.state.swiper && this.setState({ currentIndex: this.state.swiper.activeIndex })
}
};
Is there another method of allowing for overlap of the edges of other carousel images, or a fix for this visual glitch?
Using Selenium Javascript
driver.wait(until.elementLocated(By.css(".handle.handler1")), 5000);
var slider = driver.findElement(By.css(".handle.handler1"));
slider.then(function (elem) {
driver.actions().dragAndDrop(elem, {x: 25, y: 0}).perform();
});
I tried to put this code in loop and I see slider is selected but it does not move
I'm having problems with isotope in my site. I thought I tackled them all but now there is still a problem when resizing the window. On resize of the window the whole grid is moved way down on the page. This is not fixed by re-doing the layout when the window size changes. Triggering a .isotope('layout') always moves the whole grid to the bottom of the page. My code also implements infinite scroll, that is why I have the part on the hiddenelem's children. I'm also using bootstrap btw.
The (important) part of the code:
if (typeof g_Isotopegrid === 'undefined') {
g_Isotopegrid = $('.grid').isotope({
itemSelector: '.grid-item',
stamp: '.stamp',
masonry: {
columnWidth: 255,
gutter: 30
}
});
}
// Append all the hidden items to the visible items element
hiddenElm.children().each(function () {
var aItem = $(this);
// Append the items to the visible div
aItem.appendTo(visibleElm).imagesLoaded(function() {
g_Isotopegrid.isotope('appended', aItem);
});
});
Any help is appreciated!
In Bootstrap I never set static width:
masonry: {
columnWidth: 255,
gutter: 30
}
just item's class:
masonry: {
columnWidth: '.grid-item',
gutter: 30
}
When you are using Bootstrap is better for item width use bootstrap's classes.
The problem was that we were not using the direct container of the grid items as the element to apply isotope to.
I have a custom panel and now I added animation for the panel to be show on button click. Problem now is the start & stop positions of the animation. I want to set the position from where to start the animation and where to end it.
Now am doing this way
showAnimation: {
type: 'slideIn',
direction: 'up',
duration: 400,
easing: 'ease',
listeners: {
animationend: function(evt, obj) {
// my code here
}
}
}
This shows the popup from the bottom of the screen but I don't want to come all the way from bottom of the screen. Is there a way to do it?
Instead of showAnimation, you can use Ext.Animator.run.
Here is the sample:
Ext.Animator.run({
element: this.getNavigation().element, // this.getYourViewObject().element
duration: 500,
easing: 'ease-in',
preserveEndState: true,
from: {
top: document.body.clientHeight // Max Height i.e Bottom
},
to: {
top: 0 // Height where you want to stop your Slide View
}
});
If you still don't get it, feel free to comment. I'll make you a Demo.