Jump to content

Bootstrap

PauseGreen

By PauseGreen
in Discussion générale

 Share

Recommended Posts

PauseGreen Enthusiast

PauseGreen

Posted
Posted

Bonjour je rencontre des difficultés avec booststrap lorsque je copie le code d’un carrousel sur un bloc html il s’affiche mais rien n’est actifs, les images ne défilent pas et les flèches preview ne sont pas afficher. Il doit me manquer une partie donc j’ai copier les css dans assets/css les fonts et les js mais rien ni fait, ça ne fonctionne pas.

auriez vous une solution ? 

merci pour votre aide ! 

Link to comment
Share on other sites
PauseGreen Enthusiast

PauseGreen

Posted
  • Author
Posted (edited)

Désolé j'essai de compléter un peu mon post:

Voilà le code de base que je voudrais installer dans un block html comme le bloc texte personnalisé. 

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-6">
					<div class="carousel slide" id="carousel-648146">
						<ol class="carousel-indicators">
							<li data-slide-to="0" data-target="#carousel-648146" class="active">
							</li>
							<li data-slide-to="1" data-target="#carousel-648146">
							</li>
							<li data-slide-to="2" data-target="#carousel-648146">
							</li>
						</ol>
						<div class="carousel-inner">
							<div class="carousel-item active">
								<img class="d-block w-100" alt="Carousel Bootstrap First" src="https://www.layoutit.com/img/sports-q-c-1600-500-1.jpg" />
								<div class="carousel-caption">
									<h4>
										First Thumbnail label
									</h4>
									<p>
										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
									</p>
								</div>
							</div>
							<div class="carousel-item">
								<img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://www.layoutit.com/img/sports-q-c-1600-500-2.jpg" />
								<div class="carousel-caption">
									<h4>
										Second Thumbnail label
									</h4>
									<p>
										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
									</p>
								</div>
							</div>
							<div class="carousel-item">
								<img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://www.layoutit.com/img/sports-q-c-1600-500-3.jpg" />
								<div class="carousel-caption">
									<h4>
										Third Thumbnail label
									</h4>
									<p>
										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
									</p>
								</div>
							</div>
						</div> <a class="carousel-control-prev" href="#carousel-648146" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-648146" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
					</div>
				</div>
				<div class="col-md-6">
					<div class="carousel slide" id="carousel-752713">
						<ol class="carousel-indicators">
							<li data-slide-to="0" data-target="#carousel-752713">
							</li>
							<li data-slide-to="1" data-target="#carousel-752713" class="active">
							</li>
							<li data-slide-to="2" data-target="#carousel-752713">
							</li>
						</ol>
						<div class="carousel-inner">
							<div class="carousel-item">
								<img class="d-block w-100" alt="Carousel Bootstrap First" src="https://www.layoutit.com/img/sports-q-c-1600-500-1.jpg" />
								<div class="carousel-caption">
									<h4>
										First Thumbnail label
									</h4>
									<p>
										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
									</p>
								</div>
							</div>
							<div class="carousel-item active">
								<img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://www.layoutit.com/img/sports-q-c-1600-500-2.jpg" />
								<div class="carousel-caption">
									<h4>
										Second Thumbnail label
									</h4>
									<p>
										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
									</p>
								</div>
							</div>
							<div class="carousel-item">
								<img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://www.layoutit.com/img/sports-q-c-1600-500-3.jpg" />
								<div class="carousel-caption">
									<h4>
										Third Thumbnail label
									</h4>
									<p>
										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
									</p>
								</div>
							</div>
						</div> <a class="carousel-control-prev" href="#carousel-752713" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-752713" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-3">
					<img alt="Bootstrap Image Preview" src="https://www.layoutit.com/img/sports-q-c-140-140-3.jpg" />
				</div>
				<div class="col-md-3">
					<img alt="Bootstrap Image Preview" src="https://www.layoutit.com/img/sports-q-c-140-140-3.jpg" />
				</div>
				<div class="col-md-3">
					<img alt="Bootstrap Image Preview" src="https://www.layoutit.com/img/sports-q-c-140-140-3.jpg" />
				</div>
				<div class="col-md-3">
					<img alt="Bootstrap Image Preview" src="https://www.layoutit.com/img/sports-q-c-140-140-3.jpg" />
				</div>
			</div>
		</div>
	</div>
</div>

Malheureusement cela n'affiche que les images mais rien n'est actif (ni les sliders ni les flèches next et preview) qui ne sont pas affichées du tout.

Je joins deux captures (une de l'editeur bootstrap l'autre de mon site)

J'espère que ces infos supplémentaires permettront de m'aider !

Merci !

capture apercu sur mon site.jpg

capture apercu de code.jpg

1615209914.layoutit.zip

Edited by PauseGreen (see edit history)
Link to comment
Share on other sites
PauseGreen Enthusiast

PauseGreen

Posted
  • Author
Posted

Je pense avoir avancé un peu, j'ai copié les fichiers css, Js et fonts du layoutit.zip (en pièce jointe) à la racine de mon site, maintenant j'ai les flèches des sliders qui s'affichent, mais les images ne défilent toujours pas !

capture apercu sur mon site-2.jpg

Link to comment
Share on other sites
PauseGreen Enthusiast

PauseGreen

Posted
  • Author
Posted

J'ai fait de multiples tentatives mais je ne suis pas assez calé dans le sujet pour m'en sortir seul.

Pour résumer:

 •J'ai copié le script bootstrap de Layoutit dans un bloc html.

•J'ai ajouté les fichiers du zip (css/fonts/js) à la racine de mon site.

• Et j'ai ajouté dans le head.tpl en dessous de {block name='hook_extra'} 

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/popper.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>

Mais je n'ai laissé que <link rel="stylesheet" href="css/bootstrap.min.css"/> car les lignes de <script> n'ont eu aucun effets.

Résultat:

•Les images s'affichent correctement, les textes aussi, les flèches et le tirets pour zapper également.

Ce qui ne fonctionne toujours pas:

•Le défilement des images dans les sliders.

Jai fait mon possible pour détailler mon problème et j'ai fait mon maximum pour trouver une solution mais forcer de constater que ça n'a mené à rien !

Je reste à votre disposition, si vous avez une solution à m'apporter.

Merci d'avance !

Link to comment
Share on other sites
PauseGreen Enthusiast

PauseGreen

Posted
  • Author
Posted

Je comprends bien mais lançant seulement ma boutique et ayant déjà acheté plusieurs modules pour la gestion des stocks, je ne peux pas me permettre d'acheter tout ce dont j'aurai besoin, malheureusement je suis obligé de faire avec finances !

Mon prochain achat sera le module pour afficher les prix dynamique.

Mais merci pour la proposition.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...