How do I slide a Div in <li> using javascript of Jquery?

See more:

Javascript

HTML

jQuery

Hello,
I am required to me make a Textual slider which is going to slide after every 3 seconds but I am not able to find out how to to do this.

the slider must slide the

div

inside it from right to left. It is not just like any image slider.
Kindly help me out how to achieve this, i have tried all the help from stackoverflow and jsFiddle but i am not getting anything thats why I have left my Script blank so that you can tell me how to do step by step.
here is my code:

HTML:

<div class="dslider">
    <div class="d30">
        <div class="bottom_mini_slide_container">
            <ul class="bottom_ul">
                <li>
                    <div class="bottom_single_div">
                        <div class="bottom_single_div_padded">

                            <span class="make_big"><img src="images/background/client says.png" /></span>
                            <p>
                                Make1 an outline by
                                assembling scattered
                                elements together..."
                            </p>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="bottom_single_div">
                        <div class="bottom_single_div_padded">
                            <span class="make_big"><img src="images/background/client says.png" /></span>
                            <p>
                                Make2 an outline by
                                assembling scattered
                                elements together..."
                            </p>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="bottom_single_div">
                        <div class="bottom_single_div_padded">
                            <span class="make_big"><img src="images/background/client says.png" /></span>
                            <p>
                                Make3 an outline by
                                assembling scattered
                                elements together..."
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="d70">
        <div class="top_mini_slide_container">

        </div>
    </div>
</div>

CSS:

.dslider{
    height: 696px;
    width: 100%;
    background-color: rgb(255,255,255);
    float: left;
    background:url(../images/background/Slider%20Background.png) no-repeat;
    background-size:100% 100%;
}
.d30{
    width:37.5%;
    float:left;
    height:100%;
}

.d70{
    width:62.5%;
    float:left;
    height:100%;
}
.bottom_mini_slide_container{
    width:100%;
    height:471px;
    position:relative;
    top:224px;
    border-top:1px solid #000;
    border-right:1px solid #000;
}

.top_mini_slide_container{
    width:100%;
    height:570px;
    position:relative;
    top:0;
    border-bottom:1px solid #000;
    border-left:1px solid #000;
}
.bottom_ul{
    display:block;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}
.bottom_ul li{
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    float:left;
}
.bottom_single_div{
    width:100%;
    height:100%;
    float:left;
}

.bottom_single_div_padded{
    padding-top: 150px;
    width: 81%;
    height: 289px;
    float: left;
    padding-right: 19%;
}
.bottom_single_div_padded p{
        font-size: 28px;
    text-align: left;
    padding-left: 65px;
    padding-right: 65px;
    margin: 0;
    margin-top: -39px;
    color:#1294de;
    padding-top: 83px;
}
.make_big{
    font-size: 64px;
    position: relative;
    left: 39px;
    top: 64px;
    font-family:mifont;
}

and here is the blank script:

<script>
$('document').ready(function(e) {
    setInterval(function(){

    }, 3000);


});
</script>