
زائر
زائر
2018-02-25, 5:42 pm
طلب تعديل كود وجدته في احدى مواقع الانجليزي ويوجد اكواد خرى لسلايد شو باشكال جميلة
واود ان يتم تديل الكود ليتوافق مع منتدى احلى منتدى
وهذا هو الموقع
وهذا الشكل الذي اعجبني ود يتعدل كود عليه

Dr.OmaR
المؤسس

المساهمات :
479
النقاط :
1013
التقيم :
103
العمر :
28
الاوسمة :

البلد :
مصر
2018-03-08, 3:17 am
اسف علي التأخير في الرد لكني كنت في الجيش
اليك حل مشكلتك
قم بالبحث عن
في قالب ال overall_header
ثم الصق الكود التالي اعلاه
ثم توجه الي التشكيلات العامة او اي مكان يقبل ال HTML و ضع فيه كود السلايدر التالي
اليك حل مشكلتك
قم بالبحث عن
|
ثم الصق الكود التالي اعلاه
- الكود:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
.thumbnail {
padding: 0;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
#slider-thumbs {
height: 565px;
overflow-y: scroll;
white-space: nowrap;
}
</style>
ثم توجه الي التشكيلات العامة او اي مكان يقبل ال HTML و ضع فيه كود السلايدر التالي
- الكود:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div id="slider-thumbs" class="col-sm-3">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-12">
<a id="carousel-selector-0" class="thumbnail"> <img src="http://placehold.it/150x150&text=zero" /> </a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-1" class="thumbnail"><img src="http://placehold.it/150x150&text=1" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-2" class="thumbnail"><img src="http://placehold.it/150x150&text=2" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-3" class="thumbnail"><img src="http://placehold.it/150x150&text=3" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-4" class="thumbnail"><img src="http://placehold.it/150x150&text=4" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-5" class="thumbnail"><img src="http://placehold.it/150x150&text=5" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-6" class="thumbnail"><img src="http://placehold.it/150x150&text=6" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-7" class="thumbnail"><img src="http://placehold.it/150x150&text=7" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-8" class="thumbnail"><img src="http://placehold.it/150x150&text=8" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-9" class="thumbnail"><img src="http://placehold.it/150x150&text=9" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-10" class="thumbnail"><img src="http://placehold.it/150x150&text=10" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-11" class="thumbnail"><img src="http://placehold.it/150x150&text=11" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-12" class="thumbnail"><img src="http://placehold.it/150x150&text=12" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-13" class="thumbnail"><img src="http://placehold.it/150x150&text=13" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-14" class="thumbnail"><img src="http://placehold.it/150x150&text=14" /></a>
</li>
<li class="col-sm-12">
<a id="carousel-selector-15" class="thumbnail"><img src="http://placehold.it/150x150&text=15" /></a>
</li>
</ul>
</div>
<div class="col-sm-8">
<div id="slider" class="col-xs-12">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box" class="col-sm-12">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div data-slide-number="0" class="active item">
<img src="http://placehold.it/470x480&text=zero" />
</div>
<div data-slide-number="1" class="item">
<img src="http://placehold.it/470x480&text=1" />
</div>
<div data-slide-number="2" class="item">
<img src="http://placehold.it/470x480&text=2" />
</div>
<div data-slide-number="3" class="item">
<img src="http://placehold.it/470x480&text=3" />
</div>
<div data-slide-number="4" class="item">
<img src="http://placehold.it/470x480&text=4" />
</div>
<div data-slide-number="5" class="item">
<img src="http://placehold.it/470x480&text=5" />
</div>
<div data-slide-number="6" class="item">
<img src="http://placehold.it/470x480&text=6" />
</div>
<div data-slide-number="7" class="item">
<img src="http://placehold.it/470x480&text=7" />
</div>
<div data-slide-number="8" class="item">
<img src="http://placehold.it/470x480&text=8" />
</div>
<div data-slide-number="9" class="item">
<img src="http://placehold.it/470x480&text=9" />
</div>
<div data-slide-number="10" class="item">
<img src="http://placehold.it/470x480&text=10" />
</div>
<div data-slide-number="11" class="item">
<img src="http://placehold.it/470x480&text=11" />
</div>
<div data-slide-number="12" class="item">
<img src="http://placehold.it/470x480&text=12" />
</div>
<div data-slide-number="13" class="item">
<img src="http://placehold.it/470x480&text=13" />
</div>
<div data-slide-number="14" class="item">
<img src="http://placehold.it/470x480&text=14" />
</div>
<div data-slide-number="15" class="item">
<img src="http://placehold.it/470x480&text=15" />
</div>
</div>
<!-- Carousel nav --> <a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a data-slide="next" role="button" href="#myCarousel" class="right carousel-control"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
</div>
</div>
</div>
</div>
<!-- /Slider -->
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
</script>