image carousel

یک ویژگی محبوب در ساخت وبسایت است .در واقع با استفاده از این ویژگی میتوانید در فضای کمتری محتوای بیشتری را به نمایش بگذارید. افزونه های زیادی برای ساخت تصاویر کاروسل در دسترس است اما امروز من میخواهم به شما آموزش دهم که چطور با استفاده از جاوااسکریپت و کدهای سی اس اس از این ویژگی در قالب دی وی استفاده کنید .در واقع با این کدها میتوانید از این خاصیت برای هر کدام از ماژول های Divi و یا به صورت ترکیبی استفاده کنید.

یک برگه جدید ایجاد نمایید و یا برگه ای را که میخواهید تصاویر متحرک داشته باشید باز کنید.

یک section جدید با اندازه استاندارد و یک ستونه اضافه کنید .

به آدرس زیر بروید :

Setting section→Advanced→CSS class

و عبارت ds-carousel-section را تایپ کنید . سپس تغییرات اعمال شده را save نموده واز section  خارج شوید .

حالا تنظیمات مربوط به سطر مورد نظر را باز کنید و مطابق با تصویر زیر در تب Advanced کلاس ds-carousel-row  را به این سطر اضافه نمایید .

Row Module Setting→Advanced→CSS Class

حالا بر روی Insert Module کلیک کنید و Image Module را انتخاب کنید.

در تب محتوای ماژول تصویر یک تصویر اضافه کنید :

در صورتی که میخواهید  عکس شما با کلیک روی آن در جعبه نور باز شود ، مطابق با تصویر زیر عمل کنید:

همچنین میتوانید یک آدرس به عکس اختصاص دهید تا کاربر با کلیک بر روی آن به صفحه مورد نظر هدایت شود.

در این صورت مطابق با تصویر زیر تنظیمات را اعمال کنید و آدرس صفحه مورد نظر را جلوی پیکان قرمز تایپ نمایید :

در نهایت تب Advanced را باز کنید و کلاسds-carousel-module را در فیلد CSS Class  تایپ نمایید .سپس تنظیمات اعمال شده را ذخیره نموده و از ماژول خارج شوید .

مطابق با تصویر زیر عمل کنید :

اکنون یکی از ماژول های ما آماده شد ، اما برای داشتن تصاویر چرخشی( image carousel) به بیش از یک تصویر نیاز داریم .ما میخواهیم که در کد تعریف شده ۵ تصویر همزمان حرکت کنند بنابراین حداقل باید ۶تصویر داشته باشیم تا این دستورات به درستی عمل کنند و تصاویر اسلاید شوند .بنابراین ماژول عکس مورد نظر را به تعداد لازم کپی کنید.

نتیجه به صورت زیر خواهد بود:

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

تنظیمات مربوط به محتوا در اینجا کامل میشود .حال قصد داریم ناوبری ایجاد کنیم .

یک بخش جدید شامل دو ستون درست در زیر بخش قبلی اضافه کنید .تنظیمات سطر را باز کنید و در تب advanced کلاس ds-arrow-row  را به css class اضافه نمایید .

مطابق با تصویر زیر:

تنظیمات را ذخیره کنید و خارج شوید .

افزودن دکمه های ناوبری

ماژول text را به هر کدام از ستونها در این سطر اضافه کنید (مطابق با تصویر زیر عمل کنید.)

ماژول متنی سمت چپ را باز کنید و در قسمت محتوا کد HTML زیر را کپی کنید :

<input id=”ds-arrow-left” type=”button” value=”8″>

تنظیمات را ذخیره کنید و خارج شوید .

سپس همین مراحل را برای ستون سمت راست انجام دهید اما به جای کد قبلی از این کد استفاده کنید :

<input id=”ds-arrow-right” type=”button” value=”9″>

توجه کنید که ابتدا وارد تب متن(text) شوید و سپس کد HTML را قرار دهید

تنظیمات را ذخیره نموده و خارج شوید.

در واقع ما به این فیلدهای ورودی آیدی های منحصر به فرد ds-arrow-left و ds-arrow-right را میدهیم تا هنگامی که روی آن کلیک شود عمل نمایند .

مقادیر ۸ و ۹ به فلش دو طرف چپ و راست از فونت خانواده ET Modules اشاره دارند.

مراحلی که تا اینجا انجام دادیم مربوط به تنظیمات مورد نیاز بر روی DiVi Builder است . در این حالت اگر پیج مورد نظر را مشاهده کنید فقط یک ستون از تصاویر و دو دکمه خاکستری خواهید دید که هیچ کاری نمیکنند بنابراین باید کدهای مورد نیاز را نیز بیفزایید .

افزودن Css

به آدرس زیر بروید

Divi > Theme Options > General > Custom CSS

 

و کدهای زیر را کپی کنید .

/*Hide the section overflow*/
.ds-carousel-section {
width: 100%;
overflow: hidden;
}

/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}

@media all and (max-width: 1024px) {
/*Override Divi’s width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}

@media all and (max-width: 479px) {
/*Override Divi’s width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}

/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
color: #fff;
background: gray;
font-family: ‘ETModules’;
font-size: 30px;
padding: 5px 30px;
border-style: none;
border-radius: 0;
cursor: pointer;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

/*Position the left arrow*/
#ds-arrow-left {
float: right;
margin-right: 5px;
}

/*Position the right arrow*/
#ds-arrow-right {
float: left;
margin-left: 5px;
}

/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
-webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}

/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
float: left;
width: 100% !important;
margin-right: 0 !important;
}

/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}

@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}

ویرایش کدهای Css بر حسب نیاز

بسته به اینکه شما چه تعداد ماژول در اسلاید متحرک خود استفاده میکنید ممکن است نیاز به تغییراتی در کدهای Css داشته باشید .

به عنوان مثال دستور زیر عرض ردیف حاوی ماژول را تغییر میدهد .

/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}

برای اینکه ماژول ها در کنار یکدیگر شناور باشند و یک فاصله عرضی قابل رویت هم در بین آنها وجود داشته باشد ، بایستی عرض سطر را بیشتر کنیم

اگر اکنون دوباره صفحه را بررسی کنید باید carousel را مشاهده کنید اما برای اینکه فعال شود نیاز است که جاوااسکریپ نیز افزوده شود

افزودن جاوااسکریپت

در تنظیمات پوسته دی وی به آدرس زیر بروید :

Divi > Theme Options > Integrations > Add code to the < head > of your blog

کدهای زیر را کپی و تنظیمات را ذخیره کنید.

<script type=”text/javascript”>
(function ($) {

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) – 1; //End index

if (mn_index < mn_end_index ) {
mn_index++;
item.animate({‘left’:’-=100vw’}, 1000);
}
}

function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index–;
item.animate({‘left’:’+=100vw’}, 1000);
}
}

function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({‘left’:’+=’+move_vw+’vw’}, 1000);
mn_index = 0;
}
}

function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}

function mn_carousel_init() {
mn_set_visible();

var item = $(‘.ds-carousel-module’);

$(‘#ds-arrow-right’).click(function() {
mn_next_slide(item);
});

$(‘#ds-arrow-left’).click(function() {
mn_previous_slide(item);
});

$(window).resize(function() {
mn_set_visible();
mn_first_slide(item);
});

}

$(document).ready(function() {
mn_carousel_init();
});

})(jQuery)
/script>

این کدها در واقع مربوط به عملکرد دکمه های ناوبری است و باعث میشود با کلیک کردن بر روی آنها تصاویر به سمت چپ یا راست حرکت نمایند .

شاید بخواهید بعضی از کدها را ویرایش کنید. به عنوان مثال کدهای زیر را ببینید:

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

mn_visible = 5; این کد مربوط به متغیر مربوط به تعداد ماژول های نمایش داده شده در هر صفحه در نمایشگر دستکتاپ است .بنابرین اگر در کدهای Css عدد دیگری را گذاشته باشید اینجا نیز باید این عدد را تغییر دهید .

به همین ترتیب این دستور تعداد تصاویر در تبلت و تلفن همراه را نیز مشخص میکند .بنابراین اگر این اعداد را در Css تغییر دهید در اینجا نیز باید مقدار mn_visible تغییر کند.

function mn_set_visible() {
    if ($(window).width() < 480) {     
        mn_visible = 1;
    } else if ($(window).width() < 1025) {
        mn_visible = 3;
    }
}

در نهایت باید سرعت حرکت Carousel را تعریف کنیم که در اینجا روی ۱۰۰۰ میلی ثانیه تنظیم شده است که میتوانید سرعت  آن را تندتر و یا کندتر نمایید .

function mn_next_slide(item) {
        mn_end_index = ( item.length / mn_visible ) – 1; //End index
     
        if (mn_index < mn_end_index ) {
            mn_index++;
            item.animate({‘left’:’-=100vw’}, 1000);
        }
}
 
function mn_previous_slide(item) {
        if (mn_index > 0) {
             mn_index–;
             item.animate({‘left’:’+=100vw’}, 1000);
        }
}
 
function mn_first_slide(item) {
        if (mn_index > 0) {
             var move_vw = (100 * mn_index);
             item.animate({‘left’:’+=’+move_vw+’vw’}, 1000);
             mn_index = 0;
        }
}  

 

در اینجا کار به پایان رسیده و اگر پیج خود را باز کنید باید یک image carousel را ببینید.

استفاده از carousel در ماژول وبلاگ

به جای اضافه کردن یک ماژول تصویری، ماژول وبلاگ را انتخاب کنید و کلاس mod-ds-carousel را در تب پیشرفته تنظیمات ماژول اضافه کنید.

وارد تب Design شوید و حالت grid را برای وبلاگ انتخاب کنید .در تب Content تنظیمات  زیر را مطابق با تصویر اعمال نمایید سپس ذخیره و خروج را بزنید . 

بعد از انجام این مراحل به تعداد مورد نیاز از ماژول وبلاگ کپی کنید.

هر بار که از ماژول وبلاگ کپی میگیرید ،در قسمت تنظیمات عدد Offset number را از صفر به ۱ و الی آخر تغییر دهید

۱st = Offset Number: 0
۲nd = Offset number: 1
۳rd = Offset Number: 2
۴th = Offset Number: 3 

چند CSS اضافی دیگر

با توجه به اینکه محتوای ماژول وبلاگ در حالت Grid در ستونهایی نمایش داده میشود بایستی کدهای زیر را به Css اضافه کنیم تا تنظیمات ستونهای دی وی در نمایشگرهای کوچکتر جایگزین شود .    در صورتی که حالت نمایش وبلاگ را بر روی fullwidth قرار دهیم نیازی به افزودن کدهای زیر نیست .

@media all and (max-width: 980px) {
    /*Set post to fullwidth on smaller screens*/
    .ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
        width: 100% !important;
        margin: 0 !important;
    }
}

در صورتی که تمام مراحل بالا را به درستی انجام دهید ،تصویر زیر را مشاهده خواهید نمود .

 

برای دیدن متن مقاله به زبان اصلی اینجا کلیک کنید.