نحوه ساخت اسلایدر تصویر با CSS3

CSS3 بروز رسانی : یکشنبه 14 خرداد 1402

در مقاله آموزشی امروز در لیداوب همراه ما باشید تا با آموزش نحوه ساخت اسلایدر تصویر با CSS3 آشنا شوید.

کدهای HTML

می‌خواهیم دو فهرست نامنظم ایجاد کنیم که یکی برای thumbnailها و دیگری برای تصاویر باشد. برای لینک کردن thumbnail به تصویر مربوط به خود به هر تصویر یک id می‌دهیم:

<div class="slider-wrapper">

    <ul class="s-thumbs">
        <li><a href="#slide-1"><img src="img/thumb1.png" alt=""><span>Slide Left</span></a></li>
        <li><a href="#slide-2"><img src="img/thumb2.png" alt=""><span>Slide Right</span></a></li>
        <li><a href="#slide-3"><img src="img/thumb3.png" alt=""><span>Slide Top</span></a></li>
        <li><a href="#slide-4"><img src="img/thumb4.png" alt=""><span>Slide Bottom</span></a></li>
        <li><a href="#slide-5"><img src="img/thumb5.png" alt=""><span>Zoom In</span></a></li>
        <li><a href="#slide-6"><img src="img/thumb6.png" alt=""><span>Zoom Out</span></a></li>
        <li><a href="#slide-7"><img src="img/thumb7.png" alt=""><span>Rotate</span></a></li>
    </ul>

    <ul class="s-slides">
        <li class="slideLeft first" id="slide-1"><img src="img/slide1.png" alt=""></li>
        <li class="slideRight" id="slide-2"><img src="img/slide2.png" alt=""></li>
        <li class="slideTop" id="slide-3"><img src="img/slide3.png" alt=""></li>
        <li class="slideBottom" id="slide-4"><img src="img/slide4.png" alt=""></li>
        <li class="zoomIn" id="slide-5"><img src="img/slide5.png" alt=""></li>
        <li class="zoomOut" id="slide-6"><img src="img/slide6.png" alt=""></li>
        <li class="rotate" id="slide-7"><img src="img/slide7.png" alt=""></li>
    </ul>

</div>

 استایل اولیه CSS

در این مرحله، می‌خواهیم آرایش اولیه را برای اسلایدر خود ایجاد کنیم. برای این کار، حاشیه و پدینگ را برای تمام عناصر اسلایدر به حالت قبل درآورده و به آن‌ها طول و عرض ثابت می‌دهیم و سپس آن‌ها را جایگذاری می‌کنیم:

.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
}

.slider-wrapper {
    width: 508px;
    overflow: hidden;
}

ul.s-thumbs li {
    float: left;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
    width: 500px;
    height: 350px;
    position: relative;
}

ul.s-slides {
    overflow: hidden;
    clear: both;
}

ul.s-slides li {
    position: absolute;
    z-index: 50;
}

کدهای CSS

حالا در این مرحله می‌خواهیم استایل‌های CSS3 را اضافه کنیم تا ظاهر اسلایدر ما زیباتر شود. در اینجا، از برخی خصوصیت CSS3 مانند سایه‌ها، گوشه‌های گرد و غیره استفاده می‌کنیم. توجه داشته باشید که برای هر مرورگر از پیشوند مشخصی استفاده می‌کنیم:

ul.s-thumbs li {
    float: left;
    margin-bottom: 10px;
    margin-right: 11px;
}

ul.s-thumbs li:last-child {
    margin-left: 1px;
    margin-right: 0;
}

ul.s-thumbs a {
    display: block;
    position: relative;
    width: 55px;
    height: 55px;
    border: 4px solid transparent;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;

    font: bold 12px/25px Arial, sans-serif;
    color: #515151;
    text-decoration: none;
    text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}

ul.s-thumbs img {
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

ul.s-thumbs a:hover,
ul.s-slides {
    border: 4px solid #141517;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
    box-shadow: 0px 1px 0px rgba(255,255,255,.05);
}

 توصیف تصویر

در این مرحله یک باکس توصیف تصویر اضافه می‌کنیم که وقتی نشانگر موس روی تصویر قرار می‌گیرد، نمایان خواهد شد. ما با استفاده از برخی از استایل‌های CSS3 و سلکتور :before برای افزودن فلش به باکس، این افکت را ایجاد می‌کنیم.

کد HTML

برای ایجاد باکس و افزودن تگ span و متن به تگ anchor یه صورت زیر عمل می‌کنیم:

<ul class="s-thumbs">
    <li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
    <li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
    <li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
    <li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
    <li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
    <li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
    <li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
</ul>

کد CSS

برای ایجاد باکس یک عرض ثابت اضافه می‌کنیم تا بتوانیم باکس را در مرکز تصویر قرار دهیم و سپس کمی سایه و گرادینت اضافه می‌کنیم تا ظاهر بهتری داشته باشد. برای ایجاد فلش با CSS از یک ترفند border استفاده می‌کنیم:

ul.s-thumbs li a:hover span {
    position: absolute;
    z-index: 101;
    bottom: -30px;
    left: -22px;
    display: block;
    width: 100px;
    height: 25px;
    text-align: center;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
    -moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
    box-shadow: 0px 1px 0px rgba(0,0,0,.4);

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;

    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* W3C */
}

ul.s-thumbs li a:hover span:before {
    width: 0;
    height: 0;
    border-bottom: 5px solid #ffffff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: '';
    position: absolute;
    top: -5px;
    left: 44px;
}

ul.s-thumbs li:first-child a:hover span {
    left: -3px;
}

ul.s-thumbs li:first-child a:hover span:before {
    left: 25px;
}

ul.s-thumbs li:last-child a:hover span {
    left: auto;
    right: -3px;
}

ul.s-thumbs li:last-child a:hover span:before {
    left: auto;
    right: 26px;
}

 جا به جایی اسلایدر

حالا می‌خواهیم جا به جایی اسلایدر را شروع کنیم. از آنجایی که برای هر تصویر یک جا به جایی متفاوت ایجاد می‌کنیم، لازم است تا یک class name متفاوت برای تصاویر اضافه کنیم:

کد HTML

<ul class="s-slides">
    <li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
    <li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
    <li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
    <li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
    <li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
    <li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
    <li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>

کد CSS

برای ایجاد جا به جایی ما از @keyframes استفاده می‌کنیم. این انیمیشن با تغییر تدریجی از یک مجموعه از استایل‌های CSS از یک استایل دیگر، ایجاد می شود. برای تشخیص اینکه انیمیشن چه زمانی آغاز شده، تغییر یافته و به پایان می‌رسد، از درصدها استفاده می‌کنیم که 0% آغاز انیمیشن و 100% پایان انیمیشن است. حالا می‌خواهیم این انیمیشن‌ها را ایجاد کنیم.

اسلاید از سمت چپ

در شروع انیمیشن، تصویر در جایگا 500 پیکسل منفی در سمت چپ قرار می‌گیرد و وقتی انیمیشن کامل می‌شود، تصویر در صفر پیکسل از سمت چپ قرار خواهد داشت. با قرار دادن طول نمایش انیمیشن روی 1 ثانیه، یک اسلاید افکت از سمت چپ به راست خواهیم داشت:

/* Slide Left */

@-webkit-keyframes 'slideLeft' {
    0% { left: -500px; }
    100% { left: 0; }
}

ul.s-slides li.slideLeft:target {
    z-index: 100;

    -webkit-animation-name: slideLeft;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

اسلاید از سمت راست

/* Slide Right */

@-webkit-keyframes 'slideRight' {
    0% { left: 500px; }
    100% { left: 0; }
}

ul.s-slides li.slideRight:target {
    z-index: 100;

    -webkit-animation-name: slideRight;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

اسلاید از بالا

/* Slide Top */

@-webkit-keyframes 'slideTop' {
    0% { top: -350px; }
    100% { top: 0; }
}

ul.s-slides li.slideTop:target {
    z-index: 100;

    -webkit-animation-name: slideTop;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

اسلاید از پایین

/* Slide Bottom */

@-webkit-keyframes 'slideBottom' {
    0% { top: 350px; }
    100% { top: 0; }
}

ul.s-slides li.slideBottom:target {
    z-index: 100;

    -webkit-animation-name: slideBottom;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

زوم کردن تصویر از داخل

برای انجام زوم از خصوصیت CSS3 transfprm استفاده می‌کنیم. در شروع انیمیشن، اندازه تصویر 10 درصد خواهد بود و در پایان انیمیشن، تصویر به اندازه واقعی خود می‌رسد. ما آن را در جایگاه 4 پیکسل از بالا قرار می‌دهیم تا یک فضا ایجاد شود که در پایین نمایان خواهد شد:

/* Zoom In */

@-webkit-keyframes 'zoomIn' {
    0% { -webkit-transform: scale(0.1); }
    100% { -webkit-transform: none; }
}

ul.s-slides li.zoomIn:target {
    z-index: 100;
    top: 4px;

    -webkit-animation-name: zoomIn;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

زوم تصویر از بیرون

/* Zoom Out */

@-webkit-keyframes 'zoomOut' {
    0% { -webkit-transform: scale(2); }
    100% { -webkit-transform: none; }
}

ul.s-slides li.zoomOut:target {
    z-index: 100;

    -webkit-animation-name: zoomOut;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

چرخاندن و زوم کردن تصویر

/* Rotate */

@-webkit-keyframes 'rotate' {
    0% { -webkit-transform: rotate(-360deg) scale(0.1); }
    100% { -webkit-transform: none; }
}

ul.s-slides li.rotate:target {
    z-index: 100;
    top: 4px;

    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

تصویر Not Target

به دلیل اینکه از z-index برای این استفاده می‌کنیم که کدام تصویر در بالا قرار بگیرد، وقتی برای نمایش تصویر جدید کلیک می‌کنیم، یک باگ مشاهده می‌شود. وقتی شما روی یک thumbnail جدید کلیک می‌کنید، اسلاید فعال قبلی ناپدید می‌شود و در حین جا به جایی اسلاید جدید، آخرین اسلاید نمایش داده می‌شود. برای رفع این اشکال، باید یک استایل not-target با z-index بالاتر در حین جا به جایی اسلاید جدید اضافه کنیم:

/* Not Target */

@-webkit-keyframes 'notTarget' {
    0% { z-index: 75; }
    100% { z-index: 75; }
}

ul.s-slides li:not(:target) {
    -webkit-animation-name: notTarget;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

 اولین اسلاید قابل مشاهده

وقتی اسلایدر بارگزاری می‌شود، آخرین تصویر را نمایش خواهد داد. برای این که بتوانیم اولین تصویر قابل مشاهده اسلایدر را انتخاب کنیم، یک کلاس با z-index بالاتر ایجاد می‌کنیم و فقط لازم است این کلاس را به اسلایدری که می‌خواهید در زمان بارگذاری اسلایدر، نمایش داده شود، اضافه کنید:

/* First Slide */

ul.s-slides li.first {
    z-index: 60;
}

 بارگذاری اسلایدر

در این مرحله یک load fade به انیمیشن اسلایدر اضافه می‌کنیم چون وقتی با صفحه بارگذاری شود، یک ثانیه منتظر می‌ماند تا به اولین اسلایدر تغییر یابد. ما نمی‌خواهیم این جا به جایی را ببینیم و آن را به مدت یک ثانیه پنهان می‌کنیم و سپس دوباره نمایش می‌دهیم:

/* Slider Load */

@-webkit-keyframes 'load' {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.slider-wrapper {
    -webkit-animation-name: load;
    -webkit-animation-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
}

مطالعه مقالات بیشتر در لیداوب:

به همین راحتی توانستید یک اسلایدر تصویر با CSS3 ایجاد کنید. از این اسلایدر می‌توان در پروژه های ساده و حرفه‌ای استفاده کرد. برای مشاهده مقالات مشابه دیگر در زمینه CSS3 می‌توانید لیداوب را دنبال کنید.

برچسب ها
css css3 آموزش-css