Is it possible to push a repeater into a slider gallery? something like what you see in the wix store slider.
3 Likes
Is horizontal scroll possible with wix?
Hi,
As for your first query, can you please send a screenshot of what you were referring? Thereās no option to have a combination of both elements, but you can create something with a similar design as a workaround. Post a screenshot so that Iāll be sure weāre talking about the same component 
As for your second query, itās recommended to place all your elements inside the editor gridlines. Click here to learn more about it.
Best,
Tal.
Thank youā¦ this is my repeated and I only want to have one row across the screen but all the items can slide across the screen in a slider. I want text to show as well as image but the slider in Wix doesnāt allow that.
Hi Fantana, Tal:
I think what Fantana wants to do is hook a dataset into a slideshow (if I am not mistaken). Since the repeater pulls data from the data set and ārepeatsā a design, my understanding of the question (based on the follow up - question about horizontal scroll) is that Fantana wants to have a horizontal slideshow like repeater.
Fantana, most things are are possible using code and the wix apis. One approach would be to design a slide show and hook the slide elements up to the current datasetItem. Then using the $w.Slideshow, $w.Slide and wix-dataset apis - load a each slide in the slide show when the standard slideshow buttons are clicked.
The slide show settings provide different methods for transitioning slides including vertical and fade etc.
Another is to create a repeater that has only one item per page. Repeaters work by pulling pages of data from the dataset. You can, in code, control how you get the data for efficiency purposes and how it is displayed. By having a repeater that only displays a single item, you can adjust the repeater animation properties to something like āslide-inā. Then you can simply hook up the repeater elements to your dataset as normal and use wix-dataset controls like next() and previous() to advance the repeater items. You may have to play with the dataset controls to make this work.
A third way (and the one that I got working more effectively) is to use two identical elements with similar sub elements for your slide show content. Then use a $w.dataset and show/hide effects to provide slide show effect. I have created a step by step forum post here in case you find this useful.
Cheers
Steve
Thank you so much, i browse the content you provided and am going to spend sometime and go through it properly, but itās the best option i see so far ā3rd oneāā¦ Thanks again.
I have a slight different idea for my menue. On the top is a repeater but on mobile I want the menue to be slide-ableā¦ is it possible do do it similarly to slideshow but with slider insteadā¦ as I donāt want any button in my menue.
This is the mobile versionā¦ I have a slide to display the image but I canāt get the text in and I canāt get rid of the arrow with the wix pro gallery slider. For mobile it needs to be slider instead of slideshow.
Hi Fantana
You should be able to use a setTimeout() call to update the āslideā on a timed basis.
The challenge with the SlideShow is that you will need to manually create a collection of $w.Slide elements that you will then connect to your $w.Slideshow .slides. You could create a slide show with a small number of slides and update the slide content using the .onChange() hook. I havenāt tested this but I suspect that the next() and previous() functions tie directly to the number of slides in the .slides array. As is the result from $w.Slideshow.currentIndex. If your dataset isnāt very big then it might be OK to create a slide array that is the same size. Otherwise you will need to dynamically update the slide set based on the dataset and manipulate the slideshow index values in the onChange hook. So the technique I used for flipping between two containers you could use by having a slide array of three or four slides and using a sliding index that maps the Slideshow index into your dataset.
So for example
assume you have a dataset that contains 12 items. You could have a slideshow containing 4 slides then slide the slideshow indices along the dataset indicesā¦
0 . 1 . 2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 10 . 11 . (Dataset index)
0 . 1 . 2 3. (Slideshow Index) click on next() BASELINE
0 . 1 . 2 . 3 . click on next() . STATE A
1 . 2 . 3 . 0 click on next() . STATE B
2 3 . 0 . 1
ā¦> 0 . 1 . 2 . 3 click on next()
0 1 . 2 . 3 . click on next()
0 . 1 2 3 click on next()
Reverse the process when previous() is clicked.
Slideshow indices work in a circular manner which helps with this technique. When the next slide is needed (either because next() was clicked or the slideshow timer fires) Then one of the preloaded slides is loaded - then you can re-use the slide furtherest from the active index for the dataset record in the direction of the slide show. In this case next() moves The slide show index from 0 to 1. Previous will load slide 0 and next will load slide 2 after that. We grab the record at index 3 from the dataset and update slide at index 3 with the contents. So we now have the slideshow index mapped at STATE A. If previous() is clicked we overwrite slide #3 with the dataset record at index 11 returning us to the BASELINE. If next() is clicked again the slideshow index becomes 2 and we overwrite slide index 0 with the data from dataset record at index 4 getting us to STATE B.
Hope this helps
Steve
1 Like
yeah i can see how this works. Thanks for the info, am going to try it out.
Hi Fantana:
Reading your comment a little further. When you say it needs to be a slider on mobile. Do you mean that you want the images to slide left or right when you swipe your finger across the screen left or right?
I donāt think the wix Code base supports the notion of a slider on mobile in that way. Off the top of my head (Tal may know different) you may have to build a stand alone slider iFrame in HTML with CSS and javascript and feed it with data using the wixWindow.postMessage() and onMessage() functions to send your item data to the slider for display. As an example if you have an iFrame element which implements the javascript touches functionality. When it detects a swipe left or right it could send a message to a $w(ā#htmlFrameā).onMessage(swipeHandler); The swipeHandler could then trigger the function needed to advance the slideshow.
To remove the slideshow arrows you need to go to the slideshow element and disable the control so you need to do the following:
$(ā#Makeupmobilelsiderā).showNavigationButtons = false;
You may also need to disable the slide buttons
$(ā#Makeupmobilelsiderā).showSlideButtons = false;
you can do this conditionally by checking the device type using wix-window
if (wixWindow.formFactor === āmobileā {
$(ā#Makeupmobilelsiderā).showSlideButtons = false;
$(ā#Makeupmobilelsiderā).showNavigationButtons = false;
}
1 Like
yes thatās my aim, to have it slide when i touch the screen. i once created an iframe but the i didnāt know how to connect the html button in the iframe to my wix data, neither could i add a box or anything from the wix design catalog to it.
Fantana try this.
You need an iFrame with code similar to this:
<!DOCTYPE html>
<html>
<head>
<script>
let firstTouchX;
function setUpSwipeOnElement(el) {
el.addEventListener("touchstart", swipeBegin, false);
el.addEventListener("touchend", swipeEnd, false);
el.addEventListener("touchmove", swipeMove, false);
}
// send message to the page code
function sendPageMessage(msg) {
window.parent.postMessage(msg, "*");
}
function swipeBegin (event) {
// Swipe begin remembers the starting point x position using firstTouchX
event.preventDefault();
let touches = event.changedTouches;
let lastTouchIndex = touches.length - 1;
firstTouchX = touches[lastTouchIndex].pageX;
log('swipeEnd');
}
function swipeEnd (event) {
// The direction of the swipe is the last x position (lastTouchX) compared to firstTouchX
event.preventDefault();
let touches = event.changedTouches;
let lastTouchIndex = touches.length - 1;
lastTouchX = touches[lastTouchIndex].pageX;
let direction = (firstTouchX > lastTouchX ? 'left':'right');
log('swipeEnd');
sendPageMessage({'direction':direction});
}
function swipeMove (event) {
event.preventDefault();
let touches = event.changedTouches;
let lastTouchIndex = touches.length - 1;
let newTouchX = touches[lastTouchIndex].pageX;
let direction = (newTouchX > lastTouchX ? 'right' : 'left');
log('swipeMove');
sendPageMessage({'direction':direction, 'last':lastTouchX, 'next':newTouchX});
lastTouchX = touches[lastTouchIndex].pageX;
}
function startup() {
let swipeElement = document.getElementById('swiper');
log('swiper');
setUpSwipeOnElement(swipeElement);
sendPageMessage('startup');
}
function log(params) {
document.getElementById('log').innerHTML = '<B>'+params+'</B>';
}
</script>
<style>
#swiper {
/*
Ths sets up a block 300px high the full width of the screen.
To use it for mobile you will need to set the blue background to transparent
If you use hex rgba you can use any color with 00 on the end so
#FFFFFF00 is white with opacity set to 0 so gives a clear background
*/
background-color:blue;
width:100%;
height: 300px;
}
</style>
</head>
<body>
<div id='swiper'><p id='log'>Log messages go here!</p></div>
<script language="javascript">
window.onload = function(e){
startup();
}
</script>
</body>
</html>
Note when the swipe ends (swipeEnd() called) the direction is determined and a message is sent to your page code by calling sendPageMessage(). This calls the document.parent.postMessage() which send your message to your page.
On your page you register a message handler on the iFrame element.
So if your iFrame is called #html1 the handler will be set up as:
$w.onReady() {
// Set up handler
$w('#html1").onMessage(swipeHandler);
}
Now your swipe handler can check the message and call the handler for the slide show
function swipeHandler(event, $w) {
// NOTE: The message from the iFrame is passed in the event data property
let message = event.data;
if (message && message.hasOwnProperty('direction') {
// We received a swipe direction
if (message.direction === 'right') {
$w('#slideshow').next();
} else {
$w('#slideshow').previous();
}
}
}
Hope this helps.
Steve
Thank you for all the effort you put out to create those documentsā¦ it means alot to me. Thank You
No problem. I posted it here figuring that you may not be the only person having this issue. Hopefully it works.
1 Like
Hi Steve,
First off, thanks for your help in move us along in coding and design. Very much appreciated!
I am working on a mobile version of my site. Would the ātouchesā swip functionality work overtop of the dynamic slideshow technique you descirbed at https://www.wix.com/corvid/forum/community-discussion/dynamic-slideshow-using-dataset
If so, would the htmlframe overlay the columns-overlay elements, so that the screen becomes swipable?
And if so, can you āclickā through the iframe to select (onclick) the elements underneath?
Kind regards,
Tom