How to place swiper on circle with space between two centered slides? - javascript

My problem is to place swiperjs slides on a circle.
Everything I've been able to achieve so far can be seen here: https://codesandbox.io/s/swiper-effect-creative-forked-vvyl73?file=/index.html
The problem is that the company logo should be placed between the two central slides, and the slides should ride around it. Should by smth like this:
Maybe someone has dealt with this problem and knows how to solve it?
Or maybe there is an alternative plugin that simplifies this task?

So, had to create a new effect for the Swiper, a duplicate of "creative".
In this effect use the variable "progress", which shows where the slide is at the moment. 0 is the center, 1 is the first element, -1 is minus the first element. If progress < 0, you subtract 0.5, and if it is greater than 0, you add 0.5.Thus an empty space is formed just in the center.

Related

How to make slick slider with cropped slides

I need to make slick slider where next slider from right is cropped by half, but not from the left side. I did it with set up slidesToShow: 1.5, like in the screen below.
But also I need to make that if it's the last slide, then the previous slide should cropped by half and after the last slide there is not empty space, like in the screen below.
And if I swipe back it should be like in the first screen, cropped by the right side only.
How can I achieve this? I was looking for examples but didn't find much.
Just add folowing css
div.slick-list{
padding:0 50px 0 0;
}

How to get the number of stacked slides in reveal.js

I'm trying to make a remote to a reveal.js presentation using socket.io.
I want to get the number of slides so I'll be able to change the current slide on the screen.
My problem is that I don't know how to get the stacked slides, I do know how to get the normal one (Reveal.getState()) but I don't know if it returns the stacked slides and how.
Thank you for your time.
Found the solution,
It turns out that Reveal.getState() returns an object with the following properties:
{ indexf: undefined, indexh: 0, indexv: 0, overview: false, paused: false, _proto_: Object }
I had to change the indexh value to change the horizontal slides and the indexv value to change the vertical slides.
NOTE:
For those who might use this when adding to the indexv it goes to the slide below and when subtracting it goes to the slide above.

How to show a percentage of an image using the jquery Show() method

i'm trying to create the same nice effect of and overlayed arrow (ie desktop version of chrome) when you swipe left or right in for a mobile browser.
I use javascript and jQuery and for now i can show the arrow when I swipe. I managed to have the distance of the swipe but i can't find a way to link the two so i only show a portion of the arrow in relation with the distance !
$('#arrow').show('slide',{direction: 'right'},1000);
$('#arrow').fadeIn();
$('#arrow').fadeOut();
I'm trying to do it also with animate() but i'm still stuck :S
Thanks for the help
You'll need three values: start, end, current.
In your case, you'll need to determine what is the start end value.
I would say use the width of your swipe-able area (screen), which would give you 0 and x (where x is the width of your swipe-able area). You already have current, which is the distance between start and and where your actual swipe ends (width of swipe, perhaps?).
Once you have those values, you can derive a percentage (between 0 and 1) and apply it to your arrow using #mikakun's suggestion. The arrow graphic will either need to be absolutely positioned in the container or set as a background image of the container. That will give you the effect of only seeing a percentage of the arrow as the container expands to reveal more. A nice effect would be to have a semi-transparent/greyed out duplicate of the full arrow in behind the one you are revealing.

Centering background image javascript slider

I have this up and running and was wondering if you can start the image in the center rather than to the left. Seems if I manipulate the css it doesn't center it so wondered if it needs something within the javascript. Or in fact even to select a specific starting point within the image. My javascript knowledge is not the greatest though...
here's what I'm talking about
http://jsfiddle.net/ARTsinn/MvRdD/890/
You can use the jQuery scrollLeft() function onload to scroll the container to the center. Try this:
var center = $('#content').width()/2 - scrollWrapper.width()/2
scrollWrapper.scrollLeft(center);
Demo: http://jsfiddle.net/MvRdD/922/
The following will center the image, with no scrollbars visible:
newleft =$('body').width()/2 - $('#content').width()/2;
$('#content').offset({left: newleft});
Unfortunately it's not perfect as it doesn't let you scroll to leftest part by pressing your 'Left' button, I'm trying to see if this can be improved but nonetheless this can be useful for your as fiddling upon it.
See demo

Animate between positions with just CSS?

I want to animate between "default" states/positions for a div. For example:
Div absolutely positioned with a class, to be on the left of the screen. Class is removed via JS (or replaced) and position is now relative. The default relative position is actually on the opposite side of the screen. I want to animate this.
Something like a dock, various divs as icons in display-inline, centered horizontally on the dock. If I "delete" one of the icons, the rest will shift a bit to recenter. I want to animate them shifting to fill the gap.
Transition: all does not work (I assume because there was no predefined values for the position) so is this even possible? Are there JS solutions to this?
It's possible exactly the way you described it. Here's a live example of how it's done.
http://jsfiddle.net/nDr4y/3/
You can also remove the transition from css and use jquery to animate the element with pure JS. The syntax looks like this:
// in the object are the css properties you want to animate,
// the second argument is how long you want it to take in ms
$('.el').animate({ left: 100 }, 1000);
You just need to figure out the destination coordinates and set it using jQuery, or whatever framework you use. Other than that, it's totally possible.
http://jsfiddle.net/Kd72u/

Categories