استفاده از 2اسلایدر بوت استریپ در سایت

[mk-73 165]

دوستان سلام من چگونه میتونم در سایتم از 2اسلایدر بوت استرپ استفاده کنم ببینید من الان یک اسلایدر بوت استرپ استفاده کردم اما الان میخوام در سایدبار سایتتم از اسلایدر بوت استریپ استفاده کنم تداخل ایجاد میشه بین کدها واسلایدرها درست کار نمیکنن//ممنون میشم کسی راهنماییم کنه  خب بنظرم عوض کردن نام وکلاس هاهم نباید خوشایندی باشه.

[mk-73 165]

ممنون مشکلم حل شد....حالا میگم شاید شاید از یکی از کاربران عزیز مثل من بخواد از 2اسلایدر پیش فرض خود فریمورک بوت استریپ در سایتش استفاده کنه اگر دوستان با قالب اصلی اسلایدر های بوت استرپ اشنا باشند این قالب کلی یک اسلایدر بوت استرپی است

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ما کافیه بیاییم برای هر اسلایدر datatargetو idخاص خودشو تعریف کنیم در بوت استرپ با این کار هیچ تداخلی به وجود نخواهد امد.قابل ذکر است که datatargetیه اسم دلخواه میتونه باشه مثلا (slider1)این اسم میره به liهای اون تصاویر اسلایدر متصل میشه واز طرفی idهم برخلاف کلاس فقط یکجا تعریف میشه(یعنی از یک idنمیتوان در دوجا ازش استفاده کرد).

این یک مثال طبق گفته های بنده:

[cod]  <div id="myslider" class="carousel slide" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
</ol>
<!--slider main container-->
<div class="carousel-inner">
<div class="item active">
<img src="../common/img/img-p1/7l.png">
<div class="carousel-caption">
<a class="btn btn-circle" rel="nofollow" href="#">
<i class="fa fa-angle-double-down animated"></i>
</a>
<h2>انجمن ورد پرس فارسی</h2>
<h3>مرجع تخصصی آموزش برنامه نویسی و طراحی وب</h3>
</div>
</div>
<div class="item">
<img src="../common/img/img-p1/web%20design.jpg">
<div class="carousel-caption">
<a class="btn btn-circle" rel="nofollow" href="#">
<i class="fa fa-angle-double-down animated"></i>
</a>
<h2>انجمن ورد پرس فارسی</h2>
<h3>مرجع تخصصی آموزش برنامه نویسی و طراحی وب</h3>
</div>
</div>
<div class="item">
<img src="../common/img/img-p1/bs.jpg">
<div class="carousel-caption">
<a class="btn btn-circle" rel="nofollow" href="#">
<i class="fa fa-angle-double-down animated"></i>
</a>
<h2>انجمن ورد پرس فارسی</h2>
<h3>مرجع تخصصی آموزش برنامه نویسی و طراحی وب</h3>
</div>
</div>
<!--nav control-->
<a class="left carousel-control" data-target="#myslider" data-slide="prev">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a class="right carousel-control" data-target="#myslider" data-slide="next">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
</div>
</div> [/cod]

به طور نمونه خط کد های بالا رو ببینید در خط اول id="myslider"

که این id با این اسم واحد وصل شده به خط 4 و 5 و 6 با نام data-target  با همین نام myslider که مثلا 3تا اسلایدر ما با 3 تا تصویر هست.

حالا بقیه خط کد ها زیاد مهم نیست فقط خواستم شما رو متوجه این کنم که برای هر اسلایدر یه اسم بگذارید و وصلش کنید به li ها با همون نامid خاص برای data-target خاص.

مثلا برای اسلایدر بعدی من میگذارم id=mtslider2 با data-target=myslider2 یا هر نام دلخواه دیگه ای

امیدورام مفید واقع بشه برای کاربران عزیز انجمن ورد پرس فارسی...

موفق وپیروز باشید.

ویرایش شده دی 94 توسط mk-73