CODEWITHSUNDEEP
css
Giovanna Coppola
Giovanna Coppola

Reputation: 215

Image slider with jQuery: how to add a border to my images?

It seems to be a stupid question, but I'm trying to add a basic 1px solid black border to my image slider and it's not working.

This is what I have:

<html>

<head>
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style type="text/css">
* {
    margin:0;
    padding:0;
  }

  #slide {
    width: 1120px;
    overflow: hidden;
    height: 400px;
    margin: 50px auto;
    position: relative;
    }

  #slide img {
    position: absolute;
    z-index: 1;
    display: none;
    left: 0;
    }
</style>

</head>

<body>

    <figure id="slide">
        <img src="st1.jpg" alt="Stonehendge">
        <img src="st2.jpg" alt="Stonehendge">
        <img src="st3.jpg" alt="Stonehendge">
        <img src="st4.jpg" alt="Stonehendge">
        <img src="st5.jpg" alt="Stonehendge">
    </figure>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>


    <script type="text/javascript">
$(document).ready(function(){
    $("#slide img:eq(0)").addClass("ativo").show();
})

setInterval(slide,4000);

function slide(){ 
if($(".ativo").next().size()){ //se houver, irá fazer algo }else { //se não, irá retornar ao estado inicial do slide }


if($(".ativo").next().size()){                          
$(".ativo").fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo");
    }else{
    //faz algo
}

}else{
        $(".ativo").fadeOut().removeClass("ativo");
        $("#slide img:eq(0)").fadeIn().addClass("ativo");
}

var texto = $(".ativo").attr("alt");

$("#slide p").hide().html(texto).delay(500).fadeIn();

    }

     </script>


</body>

</html>

I've tried adding border: 1px solid #000 to #slide and #slide img and nothing happened.

What am I missing here?

Upvotes: 0

Views: 911

Answers (1)

Provision
Provision

Reputation: 271

For your image tag add the css style like this:

{
border: 1px solid #000000;
}

Upvotes: 1

Related Questions