Bootstrap Karuzela wielu przedmiotów i normalna karuzela wewnątrz pojedynczej strony asp.net - html, css, asp.net, twitter-bootstrap

Mam to 6 karuzela wielokrotnego użytku jak pokazano w http://www.bootply.com/IQ5RPxXjZ9 i a normalna karuzela na 1 przedmiot wewnątrz tej samej strony. Ale z powodu poniższego kodu normalna karuzela nie przesuwa się prawidłowo z jednego obrazu na drugi.

@media (min-width: 992px ) {

.carousel-inner .active.left { left: -16.7%; }
.carousel-inner .next        { left:  16.7%; }
.carousel-inner .prev        { left: -16.7%; }
}

jak sprawić, aby oba suwaki działały poprawnie na tej samej stronie?

Odpowiedzi:

2 Twój bootload ma tylko 1 suwak, ale w każdym przypadku, aby zastosować inny CSS dla obu suwaków, muszą one mieć inny identyfikator, a następnie tak:

@media (min-width: 992px ) {

#slider1 .carousel-inner .active.left { left: -16.7%; }
#slider1 .carousel-inner .next        { left:  16.7%; }
#slider1 .carousel-inner .prev        { left: -16.7%; }
#slider2 .carousel-inner .active.left { left: 0; }
#slider2 .carousel-inner .next        { left:  0; }
#slider2 .carousel-inner .prev        { left: 0; }
}

Zwróć uwagę, że lewe: 0 może zostać zastąpione przez cokolwiek, a możesz dodać inny styl, dodając go jako przykład, ponieważ jak powiedziałem, masz tylko jeden suwak