jquery - template - personalizar carousel bootstrap
Necesidad de alinear el carrusel bootstrap y hacer que sus balas funcionen (8)
Pruebe estas reglas en el elemento .bullets :
.bullets {
margin: 0;
padding: 0;
text-align: center;
}
Cambiar el desplazamiento de la envoltura a 2:
<div class="col-xs-offset-2 col-xs-8">
Además, reinicie el margen y el relleno de ol :
ol {
margin: 0;
padding: 0;
}
Verifica la DEMO
Tengo un carrusel de texto que debe alinearse, tampoco estoy seguro de cómo activar sus viñetas.
Al hacer clic en el enlace de demostración a continuación, verá que las viñetas no están en el medio de la página y, según el tamaño del nombre y el texto, la distancia entre el nombre y la viñeta cambia.
Necesito que todos ellos (texto, nombre, viñetas) estén en el medio de la página para cualquier tamaño de pantalla.
.carousel-content {
color: black;
display: flex;
align-items: center;
}
.name {
color: black;
display: block;
font-size: 20px;
text-align: center;
}
.mytext {
border-left: medium none;
font-size: 24px;
font-weight: 200;
line-height: 1.3em;
margin-bottom: 10px;
padding: 0 !important;
text-align: center;
}
.bullets li {
background: none repeat scroll 0 0 #ccc;
border: medium none;
cursor: pointer;
display: inline-block;
float: none;
height: 10px;
width: 10px;
}
.bullets li:last-child {
margin-right: 0;
}
.bullets li {
border-radius: 1000px;
}
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<h3>#1</h3>
<p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<h3>#2</h3>
<p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<h3>#3</h3>
<p>This is the third item.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
setCarouselHeight(''#carousel-example'');
function setCarouselHeight(id) {
var slideHeight = [];
$(id + '' .item'').each(function() {
// add all slide heights to an array
slideHeight.push($(this).height());
});
// find the tallest item
max = Math.max.apply(null, slideHeight);
// set the slide''s height
$(id + '' .carousel-content'').each(function() {
$(this).css(''height'', max + ''px'');
});
}
ACTUALIZAR
Cambié el código de viñetas a lo siguiente y hace que se muevan un poco a la parte superior. (en el medio del texto)
<div class="col-xs-offset-4 col-xs-8">
<ol class="bullets carousel-indicators">
<li class="active" data-target="#carousel-example" data-slide-to="1"></li>
<li class="" data-target="#carousel-example" data-slide-to="2"></li>
<li class="" data-target="#carousel-example" data-slide-to="3"></li>
</ol>
CSS
.col-xs-offset-4 {
/* margin-left: 33.33333333%; */
}
.col-xs-8 {
/* width: 66.66666667%; */
}
Los dos anteriores hacen que tu Div aparezca en el lado derecho
Así que para superarlos use el código CSS que figura a continuación. He atacado algunos selectores por lo que no afectará a su bottstrap.css.
.row .col-xs-offset-4 {
margin-left: 0;
}
.row .col-xs-8 ,.carousel-content div{
width:100%;
}
.carousel-content{
text-align:center;
}
.bullets.carousel-indicators{
position:initial;
padding:0;
margin:0;
width:100%;
}
- El
marginy elwidthde las dos clases han sido modificados por el css anterior.- La
divsecundaria dentro delcarousel-contentdelcarousel-contentno tomaba el ancho completo de la matriz, por lo que usamos la propiedad dewidthpara eso.text-alignpara hacer que las cosas se alineen en el centro de laDivpaddingymarginpara eliminar el CSS predeterminado adicional para loscarousel-indicators
<div class="col-xs-offset-4 col-xs-8">
<ol class="bullets">
<li class="active" data-slide-number="1"></li>
<li class="" data-slide-number="2"></li>
<li class="" data-slide-number="3"></li>
</ol>
</div>
O compensa tus viñetas o mueve tus áreas de contenido para que abarquen todo el ancho
Ante todo. Cambia tus balas a esto
<ol class="bullets carousel-indicators">
<li class="active" data-target="#carousel-example" data-slide-to="0"></li>
<li class="" data-target="#carousel-example" data-slide-to="2"></li>
<li class="" data-target="#carousel-example" data-slide-to="1"></li>
</ol>
Javascript cuenta desde 0
He agregado un poco de CSS para el contenedor balas y de deslizador. Y moví las viñetas a la parte posterior del div principal .. Parece que funciona
Su principal problema es que su marcado es un poco diferente al marcado requerido por Bootstrap para su carrusel. Por lo tanto, necesita cambiar lo siguiente:
- Tus
carousel-indicatorsdeberían estar anidados justo debajo del.carousely no en elcarousel-innerdelcarousel-inner. Esto no solo resolverá su problema de alineación para los indicadores, sino que también hará que se muestren como se espera (es decir, se resaltará el indicador "activo"). - No hay necesidad de filas y columnas en el carrusel ya que puede alinear todo con
text-align: center;. De hecho,col-xs-offset-4 col-xs-8es lo que hace que su texto se desalinee ya que ocupa 8 columnas pero deja 4 columnas en blanco en el lado izquierdo de la página.
El marcado actualizado se convierte en lo siguiente:
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<p class="mytext">This is the text of the first item.</p> <span class="name">This is the first name</span>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<p class="mytext">This is the text of the second item.This is the text of the second item.</p> <span class="name">This is the second name, This is the second name</span>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<p class="mytext">This is the text of the third item.This is the text of the third item.This is the text of the third item.</p> <span class="name">This is the third name,This is the third name,This is the third name,</span>
</div>
</div>
</div>
</div>
</div>
También notará que con este marcado necesitará CSS mínimo adicional, ya que la mayoría de lo que debe hacer se encargará de Bootstrap CSS.
Vea la demostración actualizada .
Como nota al margen, según Bootstrap, debes utilizar la clase de carousel-caption para cualquier texto que necesites insertar en el carrusel (lo que ahora está en carousel-content ), ya que Bootstrap supone que tu carrusel también tendrá una imagen para cada uno ít. Sin embargo, como este no es el caso para usted, he conservado la clase de carousel-content del carousel-caption ya que el carousel-caption del carousel-caption no se alinea / muestra correctamente sin una imagen correspondiente.
Solo algunos cambios para que todo funcione:
1) Indización cero. Inicie data-slide-to desde 0, no desde 1:
<ol class="bullets carousel-indicators">
<li ... data-slide-to="0"></li>
<li ... data-slide-to="1"></li>
<li ... data-slide-to="2"></li>
</ol>
2) Diapositivas de relleno. Agregue un relleno adicional a las diapositivas para viñetas:
.carousel-content {
...
padding: 20px 0 50px 0;
}
3) Desplazamiento de viñetas. Reduzca las viñetas inferiores para verlas mejor:
.bullets {
...
bottom: 10px;
}
Manifestación
Use un carrusel personalizado, aquí hay un expelido de algo que creé rápidamente.
Y algo de jquery:
var cont = $(''.slides''),
slide = cont.find(''.slide''),
nav = cont.find(''.nav''),
li = null,
len = slide.length,
index = slide.filter(''.start'').index();
for (var i = 0; i < len; i++) {
nav.append($(''<li>''));
}
li = nav.find(''li'');
showSlide();
slide.stop().eq(index).show();
function updateLi() {
li.removeClass(''white'');
li.eq(index).addClass(''white'');
}
function showSlide() {
slide.stop().fadeOut().eq(index).stop().fadeIn();
updateLi();
}
cont.click(function () {
index = ++index % len;
showSlide();
});
nav.click(function (e) {
e.stopPropagation();
});
li.click(function (e) {
index = $(this).index();
showSlide();
});
Para que la viñeta funcione, puede data-target="#myCarousexxx" un atributo a cada elemento de la lista como data-target="#myCarousexxx" . Automáticamente funcionará sin necesidad de script para escribir.
Agregue una clase a la lista de viñetas UL que carousel-indicators .
Su data-slide-number debe ser como data-slide-to
Dats esto amigo. Sin necesidad de CSS, se alineará automáticamente. Estudia el bootstarp.