• 0

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

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

slider.PNG

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

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

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

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

 

 

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن