Tam Sayfa Slider

Tam sayfa slider'ı intronuza veya sitenizin tam ortasına yerleştirebilirsiniz. Kodlarda bulunan "images1" , "images2" şeklindeki linkleri değiştirirseniz çok güzel ve sade bir görüntü elde edebilirsiniz..

Ekran Görüntüsü:

Kodlar:

<div id="cbp-fwslider" class="cbp-fwslider">
                <ul>
                    <li><a href="#"><img src="http://tympanus.net/Blueprints/FullWidthImageSlider/images/1.jpg" alt="img01"/></a></li>
                    <li><a href="#"><img src="http://tympanus.net/Blueprints/FullWidthImageSlider/images/2.jpg" alt="img02"/></a></li>
                    <li><a href="#"><img src="http://tympanus.net/Blueprints/FullWidthImageSlider/images/3.jpg" alt="img03"/></a></li>
                    <li><a href="#"><img src="http://tympanus.net/Blueprints/FullWidthImageSlider/images/4.jpg" alt="img04"/></a></li>
                    <li><a href="#"><img src="http://tympanus.net/Blueprints/FullWidthImageSlider/images/5.jpg" alt="img05"/></a></li>
                </ul>
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://tympanus.net/Blueprints/FullWidthImageSlider/js/jquery.cbpFWSlider.min.js"></script>
        <script>
            $( function() {
                /*
                - how to call the plugin:
                $( selector ).cbpFWSlider( [options] );
                - options:
                {
                    // default transition speed (ms)
                    speed : 500,
                    // default transition easing
                    easing : 'ease'
                }
                - destroy:
                $( selector ).cbpFWSlider( 'destroy' );
                */

                $( '#cbp-fwslider' ).cbpFWSlider();

            } );
        </script>
        <script src="http://tympanus.net/codrops/adpacks/csscustom.js"></script> 
<script src="http://tympanus.net/codrops/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script>
<script src="http://tympanus.net/Blueprints/FullWidthImageSlider/js/modernizr.custom.js"></script>
        <script type="text/javascript">

          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-7243260-2']);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();

        </script>
<style type="text/css">
/* General Blueprint Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
    font-family: 'bpicons';
    src:url('../fonts/bpicons/bpicons.eot');
    src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/bpicons/bpicons.woff') format('woff'),
        url('../fonts/bpicons/bpicons.ttf') format('truetype'),
        url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
    font-weight: normal;
    font-style: normal;
} /* Made with http://icomoon.io/ */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;
}

a {
    color: #f0f0f0;
    text-decoration: none;
}

a:hover {
    color: #000;
}

.main,
.container > header {
    width: 90%;
    max-width: 69em;
    margin: 0 auto;
    padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
    padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
    font-size: 2.125em;
    line-height: 1.3;
    margin: 0 0 0.6em 0;
    float: left;
    font-weight: 400;
}

.container > header > span {
    display: block;
    position: relative;
    z-index: 9999;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    padding: 0 0 0.6em 0.1em;
}

.container > header > span span:after {
    width: 30px;
    height: 30px;
    left: -12px;
    font-size: 50%;
    top: -8px;
    font-size: 75%;
    position: relative;
}

.container > header > span span:hover:before {
    content: attr(data-content);
    text-transform: none;
    text-indent: 0;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 110%;
    padding: 0.8em 1em;
    line-height: 1.2;
    text-align: left;
    left: auto;
    margin-left: 4px;
    position: absolute;
    color: #fff;
    background: #47a3da;
}

.container > header nav {
    float: right;
    text-align: center;
}

.container > header nav a {
    display: inline-block;
    position: relative;
    text-align: left;
    width: 2.5em;
    height: 2.5em;
    background: #fff;
    border-radius: 50%;
    margin: 0 0.1em;
    border: 4px solid #47a3da;
}

.container > header nav a > span {
    display: none;
}

.container > header nav a:hover:before {
    content: attr(data-info);
    color: #47a3da;
    position: absolute;
    width: 600%;
    top: 120%;
    text-align: right;
    right: 0;
    pointer-events: none;
}

.container > header nav a:hover {
    background: #47a3da;
}

.bp-icon:after {
    font-family: 'bpicons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    color: #47a3da;
    -webkit-font-smoothing: antialiased;
}

.container > header nav .bp-icon:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 2;
    text-indent: 0;
}

.container > header nav a:hover:after {
    color: #fff;
}

.bp-icon-next:after {
    content: "e000";
}
.bp-icon-drop:after {
    content: "e001";
}
.bp-icon-archive:after {
    content: "e002";
}
.bp-icon-about:after {
    content: "e003";
}
.bp-icon-prev:after {
    content: "e004";
}

@media screen and (max-width: 55em) {

    .container > header h1,
    .container > header nav {
        float: none;
    }

    .container > header > span,
    .container > header h1 {
        text-align: center;
    }

    .container > header nav {
        margin: 0 auto;
    }

    .container > header > span {
        text-indent: 30px;
    }
}
.cbp-fwslider {
    position: relative;
    margin: 0 0 10px;
    overflow: hidden;
    padding: 40px 0 60px;
}

.cbp-fwslider ul {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    list-style-type: none;
}

.cbp-fwslider ul li {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    float: left;
    display: block;
    margin: 0;
    padding: 0;
}

.cbp-fwslider ul li > a,
.cbp-fwslider ul li > div {
    display: block;
    text-align: center;
    outline: none;
}

.cbp-fwslider ul li > a img {
    border: none;
    display: block;
    margin: 0 auto;
    max-width: 75%;
}

.cbp-fwslider nav span {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 100px;
    background: #47a3da;
    color: #fff;
    font-size: 50px;
    text-align: center;
    margin-top: -50px;
    line-height: 100px;
    cursor: pointer;
    font-weight: normal;
}

.cbp-fwslider nav span:hover {
    background: #378fc3;
}

.cbp-fwslider nav span.cbp-fwnext {
    right: 0px;
}

.cbp-fwslider nav span.cbp-fwprev {
    left: 0px;
}

.cbp-fwdots {
    position: absolute;
    bottom: 0px;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

.cbp-fwdots span {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #ddd;
    margin: 4px;
    border-radius: 50%;
    cursor: pointer;
}

.cbp-fwdots span:hover {
    background: #999;
}

.cbp-fwdots span.cbp-fwcurrent {
    background: #47a3da;
    box-shadow: 0 0 0 2px #47a3da;
    -webkit-transition: box-shadow 0.2s ease-in-out;
    -moz-transition: box-shadow 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out;
}
</style>

yorumlar- Tasarim-CO