Bootstrap, Data attributes et ancre

Bonjour
je travaille sur un site responsive qui s'appuie sur un template Bootstrap que voici :
http://tarsiergraphics.com/demo/html/sailor2/index.html

Sur cet exemple, en bas de page, il y a 3 boutons "follow", "about" et "explore" qui font glisser un slider en dessous.
Pour faire fonctionner ce slider, le code s'appuie sur :

                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <div data-target="#about-slider" data-slide-to="0" class="tab">
                        <div class="tmenu">
                            <span class="contact-icon"></span>
                            <h5>About</h5>
                            <span class="fa fa-angle-double-down fa-2x"></span>
                        </div>
                    </div>
                </div>

Le data attribute "data-target" lance le slider "about-slider".

Ce qui me dérange, c'est que j'aurais aimé mettre un lien vers l'ancre #about afin que la page descende jusqu'à cette partie... car si on clique sur un des 3 boutons alors que le slider n'est pas visible (hors de la fenetre du navigateur) on ne voit pas ce qu'il se passe.
Normalement, cela est assez simple, il suffit de rajouter un lien comme ça :

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
					<div data-target="#about-slider" data-slide-to="0" class="tab active">
						<a class="page-scroll" href="#about">
							<div class="tmenu">
								<span class="locate-icon"></span>
								<h5>About</h5>
								<span class="fa fa-angle-double-down fa-2x"></span>
							</div>
						</a>
					</div>
</div>

ou même

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
				<a class="page-scroll" href="#about">
					<div data-target="#about-slider" data-slide-to="0" class="tab active">
							<div class="tmenu">
								<span class="locate-icon"></span>
								<h5>About</h5>
								<span class="fa fa-angle-double-down fa-2x"></span>
							</div>
					</div>
				</a>
</div>

sauf que dans ces 2 cas, le javascript du data-target ne fonctionne plus... ou l'ancre ne fonctionne pas... mais faire fonctionner les 2 ensembles est infaisable...
Enfin, je suis sûr qu'il doit y avoir moyen d'y arriver, mais je sèche...
Auriez vous une idée ?

Merci de votre aide
Modifié par jp.bond (17 Nov 2017 - 18:56)

aie... personne n'a d'idées ?

salut,

je ne sais pas si changera quelque chose mais ta cible ne s'appelle pas "about" mais "about-slider".

De plus, ton plugin permet de changer la <div data-target> en <a href>.
Le scroll ne se fera cependant pas.

Tu peux par contre faire un scroll vers la position de ton élément cible avec JQuery.

c'est normal... le div "about" est "autour" du div "about-slider"...
si je fais référence à l'ancre #about-slider" je suis trop bas dans la page....
De ce que j'ai compris avec les data attributes, c'est que je peux les utiliser de différentes façons... peut etre que je pourrais ajouter un data-ancor="about" par exemple et coder une fonction qui simule le scroll vers mon élément cible ? C'est possible ça ? ça se code comment ?
Modifié par jp.bond (20 Nov 2017 - 17:04)

Zelalsan a écrit :

Tu peux par contre faire un scroll vers la position de ton élément cible avec JQuery.

tu peux me donner un exemple ? sans passer par un lien normal, parce que ça ne marchera pas... Parce que j'ai essayé :

<a class="page-scroll" href="#about">l'ancre souhaitée</a>

et dès que je mets un <a> autour de la div qui contient le data-attribute, il ne fonctionne plus...
Ce que je cherche à faire, c'est avoir 2 data-attributes différents : un qui gere le lancement du slide (le fameux data-target="#about-slider") et peut etre un autre sur le meme div qui serait en charge de scroller jusqu'à l'ancre choisie : du genre data-scroll="#about" ?
Modifié par jp.bond (21 Nov 2017 - 11:56)