أريد سلايدر لعرض صورة واحدة مع أزرار تنقل؟

Ilyas Lyes · 9 يوليو 2016

اخواني الأفاضل أريد مثل هذا السلايدر الموجود في الصورة ، والذي يعرض صورة واحدة فقط وبها فقرة وأزرار تنقل عمودية

hassenzouari98 · 13 يوليو 2016

يمكنك صنع سلايدر مثل هذا السلايدر الموجود في الصورة ، والذي يعرض صورة واحدة فقط وبها فقرة وأزرار تنقل عمودية بالاعتماد على html و bootstrap و jquery وذلك لتسهيل الامر والسرعة في انجازها حيث سيكون الكود كما هو التالي :

هذه هي صفحة html التي ستحتوي على الصور والنصوص والازرار ...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery &amp; Bootstrap Carousel Demo</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <div class="carousel-inner">
    <div class="item active"> <img src="http://lorempixel.com/1200/400/sports" style="width:100%" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <div>
		  <div class="likes"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-heart"></span>
		  </div>
		  <div class="comments"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-comment"></span>
		  </div>
		  </div>
          <p>Aenean a rutrum nulla. Vestibulum a arcu at nisi tristique pretium.</p>
          <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
        </div>
      </div>
    </div>
    <div class="item"> <img src="http://lorempixel.com/1200/400/people" style="width:100%" data-src="" alt="Second    slide">
      <div class="container">
        <div class="carousel-caption">
          <div>
		  <div class="likes"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-heart"></span>
		  </div>
		  <div class="comments"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-comment"></span>
		  </div>
		  </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae egestas purus. </p>
          <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
        </div>
      </div>
    </div>
    <div class="item"> <img src="http://lorempixel.com/1200/400/abstract" style="width:100%" data-src="" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <div>
		  <div class="likes"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-heart"></span>
		  </div>
		  <div class="comments"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-comment"></span>
		  </div>
		  </div>
          <p>Donec sit amet mi imperdiet mauris viverra accumsan ut at libero.</p>
          <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
        </div>
      </div>
    </div>
  </div>
  <div class="carousel-control-group">
  <a class="carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-up"></span></a>
  <a class="marg-nt carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-down"></span></a> 
  </div>
  </div>
</body>
</html>

وهذه صفحة الcss التي ستحتوي على الستايل اي كيفية تنسيق الصفحة ..

#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
	text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}
.carousel-control {
	color: #607D8B;
    height: 25px;
    width: 25px;
    background-color: #fff;
}
.carousel-control:hover {
	color: #607D8B;
}
.carousel-control-group {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translate(-50%, -50%);
}
.marg-nt {
	margin-top: 40px;
}
.likes , .comments {
	display:inline-block;
	font-size:20px;
}
.likes {
	padding-right:10px;
}

يجدر الذكر بانه يمكنك استخدام هذا الكود في انظمة المحتوى كما هو الحال بالنسبة للبرمجة الخاصة ...

ملاجظة اخيرة : لاتنسى القيام باستدعاء المكتابات المستعملة في هذا الكود عند القيام بدمجه بالكود الخاص بك ..

وهذه صورة تبين الحالة التي سيكون عليها السلايدر بعد الانتهاء من تركيبه https://i.suar.me/81X2

يحيى · 10 يوليو 2016

أخي الكريم لم توضح السكربت المُستخدم هل تستخدم ووردبريس أم بلوغر؟

Ilyas Lyes · 11 يوليو 2016

بتاريخ On 10/07/2016 at 10:29 قال يحيى:

أخي الكريم لم توضح السكربت المُستخدم هل تستخدم ووردبريس أم بلوغر؟

اريده فقط html css jquery

لا ووردبريس ولابلوغر

Ilyas Lyes · 13 يوليو 2016

بتاريخ 10 ساعات قال hassenzouari98:

يمكنك صنع سلايدر مثل هذا السلايدر الموجود في الصورة ، والذي يعرض صورة واحدة فقط وبها فقرة وأزرار تنقل عمودية بالاعتماد على html و bootstrap و jquery وذلك لتسهيل الامر والسرعة في انجازها حيث سيكون الكود كما هو التالي :

هذه هي صفحة html التي ستحتوي على الصور والنصوص والازرار ...


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery &amp; Bootstrap Carousel Demo</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <div class="carousel-inner">
    <div class="item active"> <img src="http://lorempixel.com/1200/400/sports" style="width:100%" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <div>
		  <div class="likes"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-heart"></span>
		  </div>
		  <div class="comments"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-comment"></span>
		  </div>
		  </div>
          <p>Aenean a rutrum nulla. Vestibulum a arcu at nisi tristique pretium.</p>
          <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
        </div>
      </div>
    </div>
    <div class="item"> <img src="http://lorempixel.com/1200/400/people" style="width:100%" data-src="" alt="Second    slide">
      <div class="container">
        <div class="carousel-caption">
          <div>
		  <div class="likes"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-heart"></span>
		  </div>
		  <div class="comments"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-comment"></span>
		  </div>
		  </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae egestas purus. </p>
          <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
        </div>
      </div>
    </div>
    <div class="item"> <img src="http://lorempixel.com/1200/400/abstract" style="width:100%" data-src="" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <div>
		  <div class="likes"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-heart"></span>
		  </div>
		  <div class="comments"> 
		  <div>5k</div>
		  <span class="glyphicon glyphicon-comment"></span>
		  </div>
		  </div>
          <p>Donec sit amet mi imperdiet mauris viverra accumsan ut at libero.</p>
          <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>-->
        </div>
      </div>
    </div>
  </div>
  <div class="carousel-control-group">
  <a class="carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-up"></span></a>
  <a class="marg-nt carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-down"></span></a> 
  </div>
  </div>
</body>
</html>

وهذه صفحة الcss التي ستحتوي على الستايل اي كيفية تنسيق الصفحة ..


#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
	text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}
.carousel-control {
	color: #607D8B;
    height: 25px;
    width: 25px;
    background-color: #fff;
}
.carousel-control:hover {
	color: #607D8B;
}
.carousel-control-group {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translate(-50%, -50%);
}
.marg-nt {
	margin-top: 40px;
}
.likes , .comments {
	display:inline-block;
	font-size:20px;
}
.likes {
	padding-right:10px;
}

يجدر الذكر بانه يمكنك استخدام هذا الكود في انظمة المحتوى كما هو الحال بالنسبة للبرمجة الخاصة ...

ملاجظة اخيرة : لاتنسى القيام باستدعاء المكتابات المستعملة في هذا الكود عند القيام بدمجه بالكود الخاص بك ..

وهذه صورة تبين الحالة التي سيكون عليها السلايدر بعد الانتهاء من تركيبه https://i.suar.me/81X2

شكراا اخي على اجابتك انا ايضا اريده بالبوتستراب

اخي اريد ان استفسرك

هل من طريقة للحصول على نفس النتيجة لكن هذه المرة باستعمال background-image بدلا من وضع صور

واتجاه الحركة تكون عمودية وشكراا جزيلا

hassenzouari98 · 14 يوليو 2016

لجعل اتجاه الحركة عمودي كل ماعليك فعله اخي هو استعمال بعض خصائص الcss3 التي تنظم الحركة لذلك انصحك باضافة هذا الكود الى ملف الcss السابق لتكون عملية التحرك كما ترغب فيها انت اي عمودية

.carousel-inner .active {
  top: 0;
}
.carousel-inner .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}
.carousel-inner .next {
  top: 500px;
}
.carousel-inner .prev {
  top: -500px;
}

اما بالنسبة لطريقة اضافة الصورة فيمكنك اضافتها بكل بساطة في div ولكن فقط يجب ان لاتنسى ان تقوم بتعديل بعض الخصائص لتظهر الصورة بشكل جميل مثل no-repeat ... ولكني لاأنصحك باستخدام هذه الطريقة حيث ستحتاج ام لاستعمال css preprocessor لتنظيم روابط لصور او لاعطاء class لكل div ستضيف فيه صورة وبالتالي ستتعقد الامور أكثر لذلك انصحك بابقائها كما هيا الان (اي عن طريق وسم img) وهذا أفضل حل ...

المزيد حول css transitions

تم التعديل في 14 يوليو 2016 بواسطة hassenzouari98

Ilyas Lyes · 14 يوليو 2016

بتاريخ 31 دقائق مضت قال hassenzouari98:
لجعل اتجاه الحركة عمودي كل ماعليك فعله اخي هو استعمال بعض خصائص الcss3 التي تنظم الحركة لذلك انصحك باضافة هذا الكود الى ملف الcss السابق لتكون عملية التحرك كما ترغب فيها انت اي عمودية
.carousel-inner .active {
  top: 0;
}
.carousel-inner .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}
.carousel-inner .next {
  top: 500px;
}
.carousel-inner .prev {
  top: -500px;
}
اما بالنسبة لطريقة اضافة الصورة فيمكنك اضافتها بكل بساطة في div ولكن فقط يجب ان لاتنسى ان تقوم بتعديل بعض الخصائص لتظهر الصورة بشكل جميل مثل no-repeat ... ولكني لاأنصحك باستخدام هذه الطريقة حيث ستحتاج ام لاستعمال css preprocessor لتنظيم روابط لصور او لاعطاء class لكل div ستضيف فيه صورة وبالتالي ستتعقد الامور أكثر لذلك انصحك بابقائها كما هيا الان (اي عن طريق وسم img) وهذا أفضل حل ...

المزيد حول css transitions

اريد استعمال هذه الطريقة لكي لا يتشوه شكل الصورة عند تصغير الشاشة

hassenzouari98 · 14 يوليو 2016

أخي الرجاء التوضيح ماذا تقصد بتشوه الصورة ؟

Ilyas Lyes · 14 يوليو 2016

اقصد عند تصغير النافذة تفقد الصورة جودتها وهذا مايحذث عند فتح الموقع في الموبايل مثلا

لكن عندما تضع الصورة كخلفية div و background-size cover

اضن سيكون افضل

hassenzouari98 · 14 يوليو 2016

بتاريخ 1 ساعة قال Ilyas ARIBA:

لكن عندما تضع الصورة كخلفية div و background-size cover

نعم يمكنك استخدام background-size cover التي ظهرت مع الاصدار 3 من css وهي طريقة رائعة جدا ويتم استخدامها بكثرة في الحالات الشبيهة بحالتك

أريد سلايدر لعرض صورة واحدة مع أزرار تنقل؟

السؤال

Ilyas Lyes

9 أجوبة على هذا السؤال

Recommended Posts

hassenzouari98

يحيى

Ilyas Lyes

Ilyas Lyes

hassenzouari98

Ilyas Lyes

hassenzouari98

Ilyas Lyes

hassenzouari98

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية