I'm using slick.js slider for a mobile website where users can swipe/slide from view to view.
In one of those views, I need to display another slider for images. The problem is that when I slide the image-gallery, the main slides are activated and vice versa. I have named each slider differently, but I can't seem to find a way to disable the 'Big slider' when I'm interacting with the 'image gallery'.
Here's what I've done:
<div class="carousel">
<div>View 1</div>
<div>Vliew 2
<div class="carousel2">
<div>Image 1</div>
<div>Image 2</div>
<div>Image 3</div>
</div>
<div>
<div>View 3</div>
</div>
The goal is that when 'carousel2' is interacted with, the carousel should not be moved, and when carousel1 is interacted with, carousel2 should not move.
Any ideas of how to achieve this?
http://jsfiddle.net/q1qznouw/471/
You could force the carousel1 to stay at the current slide when mouse interact with the carousel2
$('.carousel').slick();
$('.carousel2').slick();
$('.carousel2').on("mousedown mouseup", function() {
$('.carousel').slick("slickGoTo", 1);
});
This is not perfect though
http://jsfiddle.net/q1qznouw/468/
Related
Here is my code.
<div class="pagecontent" id="fullpage" >
<div class="fullscreensection section">
</div>
<div class="fullscreensection section">
</div>
<div class="fullscreensection section">
</div>
<div class="fullscreensection section">
<div class="versepicture-center" style="background-image:linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),url(/docs/thumbnails/Meditate-Morning-7.jpg);"></div>
<p class="meditate-verse">But I will sing of your strength; I will sing aloud of your steadfast love in the morning. For you have been to me a fortress and a refuge in the day of <span class="nobreak">my distress. </span></p>
<p class="meditate-ref">Psalm 59:16</p>
</div>
</div>
As you can see I'm using the full page here. I want the "section" div to scroll horizontally on mobile devices.
This is what I tried but it's not working.
1.
let options = {
verticalCentered: true,
// scrollHorizontally: true,
normalScrollElements: '.section',
}
new fullpage('#fullpage', options);
When I used this it stops working even vertically ( The main purpose to use fullpagejs ).
2.
fullpage_api.setAllowScrolling(true, 'right');
You can't turn vertical sections into horizontal ones out of the box when using fullPage.js.
However, what you can do instead is initialise fullPage.js with a different HTML markup each time. Not ideal tho!
Horizontal scroll is only possible on fullPage.js when using slides inside a single section. (section = vertical, slide = horizontal).
So for example, this markup has 1 section containing 3 horizontal slides:
<div id="fullpage">
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
</div>
And the only way o allow horizontal scroll with the mouse wheel would be by using the Scroll Horizontally extension.
This other structure would create 3 vertical sections.
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>
So, to do what you want you would basically have to:
1- Use a different markup for the phone (small screen device) than for desktop
2- initialize fullpage.js for the appropriate markup
3- In case of resizing up /down you might want to destroy and initialize the new one.
So, personally, I would avoid this situation and I would just use the default responsive modes to disable snap scroll on mobile devices.
I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.
I am currently having problems with Lightbox2 and TinyCarousel working together!
When i add the lightbox link onto an image within the carousel it shows 2 of that image within the lightbox.
I read a similar situation with bxSlider and the solution was to change the infinite variable to false - i have tried this within tiny carousel but it does not work.
You can see the problem here: http://www.elementintermedia.com/newsite/
Click on the first image in the Slider to start the lightbox and it displays that linked image twice within the lightbox. This is the only lightbox link on the current page also.
I know it's tiny carousel casuing the problem as if i remove that plugin the lightbox works correctly and olny shows the image once
Can anyone please help?? Thanks
Lightbox2 2.7.1 and the bootstrap carousel work well together
for the buttons :
<div class="btn-group">
<a class="btn" href="#scroller" data-slide="prev">previous</a>
<a class="btn" href="#scroller" data-slide="next">next</a>
</div>
And the carousel :
<div id="scroller" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
your content here
</div>
<div class="item">
your content here
</div>
</div>
</div>
I didn't use it exactly like you (1 image per step), but I'm sure you can find a lot of usage examples on the web.
I am trying to create a thumbnail widget that, when fed a document as a url, will show a thumbnail for each page of the document; The number of pages should be configurable (10, 20, 50 pages etc.).
The problem I face is how to direct a thumbnail to show an intermediate page of the document, such as page 5, instead of just showing the cover page, which is the default option. Does anyone know how I can do this?
You could use HTML anchors like this :
<div id="page1">page 1</div>
<div id="page2">page 2</div>
<div id="page3">page 3</div>
<div id="page4">page 4</div>
<div id="page5">page 5</div>
and to browse to page 5 on the same HTML page create a link like this :
Go to page 5
So I have looked at jquery hover and this is all well and great but how can I use a list into this? The example that the previous user uses is all image backgrounds.
Im not sure if the is in the right place.
<div class="backdrop">
<ul id="year"></ul>
<div class="direction left"></div>
<div class="direction right"></div>
jsfiddle
Since I could not change background position on <ul><li> I decided to use margin here if my solution.