Hello,
I am trying to clink to a specific slide, the button to press is on a different page. I have gone through past discussions but can’t find a solution for this specifically.
I feel like the following code is what I need (in part) but I am still learning it all and can’t piece it together to do what I want it to.
$w ( “#button36” ). onClick (( event ) => {
$w ( “#slideshow1” ). next ();
})
$w ( “#slideshow1” ). changeSlide (1);
Any help would be greatly appreciated, thanks.
Hi, slide show usually comes with two buttons, “previousButton” and “nextButton”. Here is what actually needed:
$w ( " # previousButton " ). onClick (( event ) => {
$w ( " #slideshow1 " ).previous();
})
$w ( " # nextButton" ). onClick (( event ) => {
$w ( " #slideshow1 " ). next ();
})
Hi, I am not actually after a button to use on the slideshow, I am after a button that from a different page of my website will link to a specific slide.
For example the button on page two is called Property A and when pressed it takes you to slide 5 of the slide show on page one.
Or will that code work for this? Sorry for being a bit basic with my knowledge on this, thank you for your help.
Then use :
$w ( " # button36" ). onClick (( event ) => {
$w ( " #slideshow1 " ). changeSlide ( index);
})
And index start from zero, the first slide.
Thank you, it still won’t connect it says that the line below is not a valid sector, is that because it’s not on the page I am adding the code to?
$w ( " #slideshow1 " ). changeSlide ( index);
That is actually what I think of too, it makes no sense to play the slide that is on other page. You have to be on the slide show page to select the slide to play. Basically, what you are doing is impossible.
When you click the button, you can save the slide number in storage . Then, when you get to the other page, you can get the slide number from storage , and then changeSlide().
Thank you, I will give it try and now see if I can get it linked up. Thanks!
Hi Yisrael,
Sorry to ask again, but I must be doing something wrong here as I am still getting an error on the line $w( " #slideshow1 " ).changeSlide( 1 );
On my slide show page I have:
import {local} from ‘wix-storage’ ;
// …
local.setItem( “#slideshow1” , “Side(1)” );
And on the button page I have:
import {local} from ‘wix-storage’ ;
// …
let value = local.getItem( “#slideshow1” ); //
$w( “#button25” ).onClick((event)=>{
$w( “#slideshow1” ).changeSlide( 1 );
})
Appreciate your help!
On the button page you need to save the slide number to be displayed, and then redirect to the slide page using the wix-location API:
$w("#button25").onClick((event)=>{
local.setItem("slide-number", "1");
wixLocation.to('/SlidePage');
})
On the slide page you need something like this:
$w.onReady(function () {
let num = local.getItem("slide-number");
$w("#slideshow1").changeSlide(num);
});
To learn about programming with Corvid, read the following articles that will help you start working with Corvid:
About Corvid by Wix - what Corvid is and what features it has.
Getting Started with Corvid by Wix - step-by-step tutorial on how to start using Corvid.
Onboarding to Corvid by Wix - introduction to Corvid with short tutorials.
Thank you, and thanks for the links I have been getting through some of the tutorials - way more to go as you can probably tell!
I put in the code and have no errors, which is great but nothing happens when I press the button.
Button page code:
import wixLocation from ‘wix-location’ ;
import {local} from ‘wix-storage’ ;
// …
let value = local.getItem( “#slideshow1” ); //
$w( “#button25” ).onClick((event)=>{
local.setItem( “slide-number” , “1” );
wixLocation.to( “/projects” );
})
Slideshow page code:
import {local} from ‘wix-storage’ ;
// …
local.setItem( “#slideshow1” );
$w.onReady( function () {
let num = local.getItem( “slide-number” );
$w( “#slideshow1” ).changeSlide(num);
});
I don’t know if it will help but this is the web page that I want the button to work from https://gtd-websites.wixsite.com/hjcollection/developments-map and for it to connect to the relevant slide show at the bottom of this page https://gtd-websites.wixsite.com/hjcollection/projects
Thanks again!
Button page:
import wixLocation from 'wix-location';
import { local } from 'wix-storage';
$w.onReady(function () {
$w("#button25").onClick((event) => {
console.log('click');
local.setItem("slide-number", "1");
wixLocation.to("/projects");
})
});
Slideshow page:
import {local} from 'wix-storage';
$w.onReady(function () {
let num = Number(local.getItem("slide-number"));
$w("#slideshow1").changeSlide(num);
});
Yay thank you! It works! I just need to get it to take me to the part of the page that displays the slideshow as it currently just takes me to the projects page and the right slide but not directly to the part of the page where the slide is.
I don’t know if this would even be possible as I couldn’t link to anchors like this before?
Sorry and thank you!
Sorry, Alexandra Hebden , I misunderstood the requirement. You want the button to take you to the slide page to play slide, not just stay in the page and change the slide to play.
Yes exactly! Yisrael has been a massive help and I can now go from page one button to page two which has the slideshow on it and the right slide loads, but it doesn’t take me down the page to the slideshow it just takes me to the top of page two, so I am still trying to work out how I would do that…
Instead of this:
wixLocation.to("/projects");
use this:
wixLocation.to("/projects#slideshow1");
Legendary! Thank you so much for your help today. I will be diving more in to the tutorials and getting a better head for Corvid.
Thanks Yisrael!!
Hi Israel, @yisrael-wix
I used your code. But I still have not been able to solve to the end.
My site has a “Studies” page - which can also be accessed from the “Studies” top menu. And also in the fourth strip entitled “Studies” from the home page.
But on the “Studies” page itself, I divided it into “Courses” and “Workshops” by 2 buttons on the page that are above the slider that changes according to the click. (And also in their color)
Now, in the home page on the “Studies” strip, I also divided it into 2 “Workshops” and “Courses” boxes, and each box has a dedicated button that should lead to the “Studies” page into the correct slider. (“Courses” / “Workshops”)
So I made your code, but my problem now is that the “Studies” page in this top menu goes to the “Workshops” slide (sometimes, depending on whether you already clicked on the “Workshops” button on the home page)
In addition, according to the buttons on the “Studies” page (above the slider) it is on “Courses” (the button appears in pink)
I would really, really appreciate it if you could help me solve the code.
It will really save me in front of the customer.
Website link:
https://www.art-meaning.com/
Link to study page:
https://www.art-meaning.com/studies
A photograph of the “Studies” strip on the home page, which is divided into 2 boxes:
The code I have on the home page (where the buttons are on the strip):
$w . onReady ( function () {
// Write your JavaScript here
// To select an element by ID use: $w('#elementID')
// Click 'Preview' to run your code
});
import wixLocation from ‘wix-location’ ;
import { local } from ‘wix-storage’ ;
$w . onReady ( function () {
$w ( “#button25” ). onClick (( event ) => {
console . log ( ‘click’ );
local . setItem ( “slide-number” , “1” );
wixLocation . to ( “/studies#fullWidthSlides1” );
})
});
$w . onReady ( function () {
$w ( “#button6” ). onClick (( event ) => {
console . log ( ‘click’ );
local . setItem ( “slide-number” , “0” );
wixLocation . to ( “/studies#fullWidthSlides1” );
})
});
The code on the “Studies” page (where the slider is with the extra buttons above it):
$w . onReady ( function () {
//TODO: write your page related code here…
});
export function secondButton_click ( event , $w ) {
$w ( “#fullWidthSlides1” ). changeSlide ( 1 );
$w ( “#secondButton” ). style . backgroundColor = “#B7B7DB” ;
let bgColor = $w ( “#secondButton” ). style . backgroundColor ;
$w ( “#secondButton” ). style . color = “#DE6BB9” ;
$w ( “#firstButton” ). style . backgroundColor = “#003C3C” ;
$w ( “#firstButton” ). style . color = “#B7B7DB” ;
$w ( “#thirdButton” ). style . backgroundColor = “#003C3C” ;
$w ( “#thirdButton” ). style . color = “#B7B7DB” ;
}
export function firstButton_click ( event , $w ) {
$w ( “#fullWidthSlides1” ). changeSlide ( 0 );
$w ( “#firstButton” ). style . backgroundColor = “#B7B7DB” ;
let bgColor = $w ( “#firstButton” ). style . backgroundColor ;
$w ( “#firstButton” ). style . color = “#DE6BB9” ;
$w ( “#secondButton” ). style . backgroundColor = “#003C3C” ;
$w ( “#secondButton” ). style . color = “#B7B7DB” ;
$w ( “#thirdButton” ). style . backgroundColor = “#003C3C” ;
$w ( “#thirdButton” ). style . color = “#B7B7DB” ;
}
export function thirdButton_click ( event , $w ) {
$w ( “#fullWidthSlides1” ). changeSlide ( 2 );
$w ( “#thirdButton” ). style . backgroundColor = “#B7B7DB” ;
let bgColor = $w ( “#thirdButton” ). style . backgroundColor ;
$w ( “#thirdButton” ). style . color = “#DE6BB9” ;
$w ( “#firstButton” ). style . backgroundColor = “#003C3C” ;
$w ( “#firstButton” ). style . color = “#B7B7DB” ;
$w ( “#secondButton” ). style . backgroundColor = “#003C3C” ;
$w ( “#secondButton” ). style . color = “#B7B7DB” ;
}
export function downButtonDay2_click ( event , $w ) {
$w ( “#fullWidthSlides1” ). changeSlide ( 1 );
}
export function downButtonDay1_click ( event , $w ) {
$w ( “#fullWidthSlides1” ). changeSlide ( 0 );
}
import { local } from ‘wix-storage’ ;
$w . onReady ( function () {
let num = Number ( local . getItem ( “slide-number” ));
$w ( “#fullWidthSlides1” ). changeSlide ( num );
});