اذهب إلى المحتوى
  • 0

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

Ilyas Lyes

السؤال

Recommended Posts

  • 0

يمكنك صنع سلايدر  مثل هذا السلايدر الموجود في الصورة ، والذي يعرض صورة واحدة فقط وبها فقرة وأزرار تنقل عمودية بالاعتماد على 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

اريده فقط html css jquery

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 بدلا من وضع صور

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

لجعل اتجاه الحركة عمودي كل ماعليك فعله اخي هو استعمال بعض خصائص ال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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

 

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...