Link to a section on horizontal web page

Refresh

March 2019

Views

124 time

1

A short introduction is, I have created a website where I have 3 divs positioned horizontally on mobile devices (see image below), done with help from Bootstrap's carousel and a swipe function added on top from avinoamr's repo: https://github.com/avinoamr/bootstrap-carousel-swipe

bootstrap with swipe

Problem now is that I'm trying to add function by clicking the "Tab1", "Tab2", "Tab3" buttons on top-menu to get to the respective divs on the same page by using the href #:

<li class="col-sm-4"> <a href="#tab2">Tab2</a> </li>

...with divs like this one:

<div id="tab2" class="item active">
    <div class="col-sm-12 yellow" id="yellow">
    </div>
  </div>

...but for some reason it doesn't trigger the jump. Any idea?

You can see the original syntax here: https://jsfiddle.net/wmvx1p9t/2/

1 answers

2

Just using the id attribute will not automatically trigger the Bootstrap carousel to change position. The carousel documentation defines two ways you can trigger the carousel to scroll:

  • Via data attributes: By adding the data-slide attribute to your tab anchors. Your tab anchors will have to be inside the carousel <div> for it to work.
  • Via JavaScript: You can attach a click event listener to the tab anchors and manually trigger the carousel to cycle to the corresponding item by using: $('.carousel').carousel(number)