Carousel Bookmark Link and specific slide

Bootstrap Studio Help
1

Hello there.

I'm trying to make a nav link and go to specific carousel and specific slide. Lets say Carousel id is "carousel-1" and at the button link i give attribute "data-slide-to" and number 2 (so to go to slide 2)

So far so good its working normally. But when i press the link it doesnt go to the #carousel-1 bookmark but just changes the carousel to slide 2 and i want to goto id carousel-1 and then change slide to no2.

(im searching for a way in a one page when someone click at company go to first slide, when click on about us go to slide 2 of carousel where about us text appears) Or any other solution with "slide" effect ?

(Sorry for my not so good english..) Thank you!

2

Do you have 1 or 2 carousels, not slides, carousels?

Either way the many thing is that a carousel must have a unique ID. So if it's 1 carousel then it's ID would be carousel-1 you would refer to it by way of adding an attribute to the link as data-target="#carousel-1" so all your links that you want to have effect the 1 carousel they should all have the attribute data-target="#carousel-1".

If you have a second carousel then it's unique ID should be carousel-2 so you would then refer to it by way of adding an attribute to those links as data-target="#carousel-2" just like you would for carousel-1. But only if you have 2 carousels.

Now for the slides one thing to remember is that JS code is zero based so the first record of an array of objects is 0. So the first slide of a carousel is 0 the second slide is 1 and the third slide is 2 and so on for how ever many slides there are. So if there are 4 total slides, the record numbers are 0,1,2,3.

With that in mind if you want one of your links or images or whatever your going to click on to change to a certain slide then it needs the data-target="#carousel-(x)" and then also add an attribute of "data-slide-to" equaling the slide's record to what you want it to slide in when clicked.

So for example this is what I did using a new project

  1. I drag/dropped a carousel on to the BODY element in OVERVIEW pane
  2. I drag/dropped a navbar in the OVERVIEW pane just above the carousel
  3. I edited the FIRST/SECOND/THIRD Item links by adding the attribute of data-target="#carousel-1"
  4. I then added the attribute data-slide-to with the records 0 for the first 1 for the second and 2 for the third item
  5. I tested each link and they worked correctly in a preview mode
  6. I then drag/dropped a second carousel on to the BODY element in OVERVIEW pane, this by default sets the ID of that carousel to carousel-2

Since I wanted the SECOND Item to cause the second carousel's second slide to slide in when I clicked it I only actually had to change the attribute of the SECOND Item's data-target="#carousel-1" to data-target="#carousel-2" because it's already pointing to the second slide of a carousel I don't need to change that attribute just the target. Tested in preview mode and it worked.

I hope the gives you some in site and direction on how to go about fixing your code so it works the way you wanted it to.

Saj

3

Bootstrap Studio without Saj its half software! Saj every time.. like a hero! (I think we have to start talking about business!) Admins enable direct messages for users in This forum active.

4

@Saj all fine but the screen dont move to id #carousel-1 only to slide 2 https://anotepad.com/notes/gn8edc

So when i press Button_1 i seak to move screen to anchor #Carousel_1 and move to slide 2. (i dont really know if it cant get working)

5

Oh so your trying to scroll the window to a carousel and switch it to a certain slide too?

Saj

6

Yeap The ideal is first to scroll and after change slides but i dont know even the first :)

7

Yeah slight problem, was looking through the bootstrap js and found that it does in fact use perventDefault function on links for the carousel which means when you click a link that has the data-slide-to on it, it halts the normal function of a href from working so that it can do the carousel function. I'm not sure if a script can be written to then also scroll the page, I would assume so but the order is the slide IS going to slide first then any additional scripting would scroll the page to the carousel, not the other way around.

So I decided to grab this script I'm currently using and it looks like it will work in this case, here you go. Just add the class scrollThis to your link(s) and the script to your custom script file or create a custom one if you don't already have one.

$(".scrollThis").click(function (e){
    e.preventDefault();
    var $this = $(this);
    $('html, body').animate({
        scrollTop: $($this.attr('href')).offset().top
    }, 1500);
});

Saj

P.S. forgot to add that you need to also update the href to link to the id of the carousel, so the URL would be href="#carousel-1" etc..

8

Looking at your code, both first and second nav links are linking to the carousel-1 and only link 1 switched slides. So you may be confusing yourself when your clicking between links 1 and 2 because they are both linking to the same spot on the page. Once you click link 1, and then click link 2 it will appear as nothing has changed. If you are really meaning to have link 2 sort of seem like it reset the carousel to the first slide then it's really just that you need to add the data-slide-to=0 or which ever slide record you really want. Lets also not get each other confused :) you are technically linking to slide 3 which is record 2 if you remember my previous post.

The script I posted just does the smooth scroll part only so while links 1&2 link to the same spot on the page your only going to see the scrolling once unless you scroll back to the top of below the carousel's position on the page.

Saj

9

Perfect, works fine. I just make the speed smaller so someone can see the "slide changing" after the scroll to id.

So to sum in case someone else wants Carousel id = carousel-1 Button Link url= #carousel-1 (tha name of carousel id) Button Class name = scrollThis Button Add Attribute "data-slide-to" = 2 (the number of slide we want to move) And the code below as New Javascript:

$(".scrollThis").click(function (e){
    e.preventDefault();
    var $this = $(this);
    $('html, body').animate({
        scrollTop: $($this.attr('href')).offset().top
    }, 250);
});

@Saj Thank you!