Mettre la pagination sur le carouFredsel

asmnico
Javascript

Bonjour, j'ai suivi le tuto du carouFredsel, mais la pagination au lieu qu'elle soit en dessous du carrousel j'essaye de la mettre à l'intérieur du carrousel, sur chaque image en fait mais je ne vois pas comment faire. J'ai essayé pas mal de chose mais le mieux que j'ai eu c'est sur la 1ère image mais pas sur les autres ^^.
Merci d'avance pour votre aide.

4 réponses

zenkiai
Réponse acceptée

Essaye ceci :
Laisse ton html tel quel, ajoute une position relative à ta class image_carousel.
Donne, à ta class image_carousel .control, un bottom:0; et un left de ton choix.

zenkiai

donne-moi le code de ta view où tu as ton slide..
A priori tu dois mettre la div du controlNav dans la div carrousel en lui donnant une position absolute.

asmnico
Auteur

Voilà mes codes en gros et je voudrais mettre la pagination dans le .slide ul en gros

<div class="image_carousel" id="carousel">

                <div class="control">
                    <div id="pagination" class="pagination1"></div>
                </div>

                <div class="slide">
                        <img src="http://lorempixel.com/750/375/"/></a>

                        <ul><h1>.........</h1></ul>
                        <span>
                            <p>.............</p>
                        </span>

                </div>

                <div class="slide">

                        <img src="image1.png" height="750" width="375"/></a>
                        <ul><h1>................</h1></ul>
                        <span>
                            ...............
                        </span>
                </div>

                <div class="slide">
                        <img src="http://lorempixel.com/750/375/sports/1/"/></a>
                        <ul><h1>..........</h1></ul>
                        <span>
                            ................
                        </span>
                </div>

                <div class="slide">
                        <img src="http://lorempixel.com/750/375/"/></a>
                        <ul><h1>.............</h1></ul>
                        <span>
                            ................
                        </span>
                </div>

            </div>

.image_carousel{

    width: 600px;
    height: 300px;
}
.image_carousel .slide{
    width: 750px;
    height: 375px;
    text-align: center;
    height: bold;
    display: inline-block;
    text-align: center;
    font-weight: none;
    border: none;
    margin: 5px;
    margin-top:0px;
    padding: 0px;
    border-radius: none;
    background-position: center;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.8);
}
.image_carousel .slide ul{
    display: block;
        height: 375px;
        width: 150px;
        color: #fff;
        margin: 0px;
    padding: 0px;
    line-height: 0px;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    right: 600px;
    top: 0px;

}
.image_carousel .slide h1{
    float: center;
    font-size: 20px;
    margin-top: 100px;
}
.image_carousel .slide span{
    display: block;
        height: 50px;
        width: 100%;
        color: #fff;
        margin: 0px;
    padding: 0px;
    line-height: 0px;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    left: 0px;
    top: 375px;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
}
.image_carousel .slide span p{
}
.image_carousel .slide:hover span{
    top:325px;
}
.image_carousel .control{
    position: absolute;
}
asmnico
Auteur

ah oui ok ça marche bien, merci beaucoup :)