HTML - Utilizar un carrusel con bootstrap en dos partes

 
Vista:
sin imagen de perfil
Val: 4
Ha disminuido su posición en 19 puestos en HTML (en relación al último mes)
Gráfica de HTML

Utilizar un carrusel con bootstrap en dos partes

Publicado por Sergio (2 intervenciones) el 22/01/2018 20:43:35
Buen día. Mi objetivo es hacer un carrusel que tenga el texto en una columna y sus controladores, y en la otra columna el carrusel en sí.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="container oscuro">
    <div class="row ">
        <div class="col-md-6">
            <div id="carouselId" class="carousel slide" data-ride="carousel">
 
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <img src="imagenDePrueba1.jpg" alt="First slide" class="img-fluid">
                        <div class="carousel-caption d-none d-md-block">
                            <h3>Title</h3>
                            <p>Description</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="imagenDePrueba2.jpg" alt="Second slide" class="img-fluid">
                        <div class="carousel-caption d-none d-md-block">
                            <h3>Title</h3>
                            <p>Description</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="imagenDePrueba3.jpg" alt="Third slide" class="img-fluid">
                        <div class="carousel-caption d-none d-md-block">
                            <h3>Title</h3>
                            <p>Description</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselId" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselId" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-md-6">
 
            <div id="main"> main </div>
 
            <ol class="carousel-indicators">
                <li class="item1" data-target="#carouselId" data-slide-to="0" class="active">Texto</li>
                <li class="item2" data-target="#carouselId" data-slide-to="1"></li>
                <li class="item3"data-target="#carouselId" data-slide-to="2"></li>
            </ol>
        </div>
    </div>
</div>


Intenté hacer un script ue cuando estuviera en un item, el cambiara de color para al menos intentar un script que cambiara el texto con inner.html. Pero no funcionó

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    if ($('li.item1').hasClass('active')) {
        $('#main').addClass('woodwork');
    }
    if ($('li.item2').hasClass('active')) {
    $('#main').addClass('woodwork2');
    }
    if ($('li.item3').hasClass('active')) {
        $('#main').addClass('woodwork3');
    }
});
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder