سلايد شو متجاوب بعدة خصائص

السلام عليكم
ورحمة الله تعالى
وبركاته

في هذه التدوينة أجببت أن أقدم

لكم سلاد شو قمت بتصميمه بنفسي

وأحببت مشاركته معكم

معاينة

طريقة التركيب

قم بتحرير القالب
ثم ابحث عن الوسم ]]></b:skin>
وضع الأكواد التالية فوقه

body .options {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
min-width: 95%;
max-width: 95%;
margin: 0 auto 20px;
width: calc(100% - 100px);
height: 400px;
}
@media screen and (max-width: 718px) {
body .options {
min-width: 520px;
}
body .options .option:nth-child(5) {
display: none;
}
}
@media screen and (max-width: 638px) {
body .options {
min-width: 440px;
}
body .options .option:nth-child(4) {
display: none;
}
}
@media screen and (max-width: 558px) {
body .options {
min-width: 360px;
}
body .options .option:nth-child(3) {
display: none;
}
}
@media screen and (max-width: 478px) {
body .options {
min-width: 280px;
}
body .options .option:nth-child(2) {
display: none;
}
}
body .options .option {
position: relative;
overflow: hidden;
min-width: 60px;
margin: 10px;
background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
background-size: auto 120%;
background-position: center;
cursor: pointer;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option:nth-child(1) {
--defaultBackground: #ed5565;
}
body .options .option:nth-child(2) {
--defaultBackground: #fc6e51;
}
body .options .option:nth-child(3) {
--defaultBackground: #ffce54;
}
body .options .option:nth-child(4) {
--defaultBackground: #2ecc71;
}
body .options .option:nth-child(5) {
--defaultBackground: #5d9cec;
}
body .options .option:nth-child(6) {
--defaultBackground: #ac92ec;
}
body .options .option.active {
flex-grow: 10000;
transform: scale(1);
max-width: 600px;
margin: 0px;
border-radius: 40px;
background-size: auto 100%;
/*&:active {
transform:scale(0.9);
}
*/
}
body .options .option.active .shadow {
box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}
body .options .option.active .label {
bottom: 20px;
left: 0;
right: 20px;
}
body .options .option.active .label .info > div {
left: 0px;
opacity: 1;
}
body .options .option:not(.active) {
flex-grow: 1;
border-radius: 30px;
}
body .options .option:not(.active) .shadow {
bottom: -40px;
box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
body .options .option:not(.active) .label {
bottom: 10px;
left: 0;
}
body .options .option:not(.active) .label .info > div {
left: 20px;
opacity: 0;
}
body .options .option .shadow {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 120px;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label {
display: flex;
position: absolute;
right: 0px;
height: 40px;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label .icon {
display: flex;
flex-direction: row;
margin-right: 11px;
justify-content: center;
align-items: center;
min-width: 40px;
max-width: 40px;
height: 65px;
margin-top: -25px;
border-radius: 20px;
background-color: white;
color: var(--defaultBackground);
}
body .options .option .label .info {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 10px;
color: white;
white-space: pre;
text-align: right;
}
body .options .option .label .info > div {
position: relative;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
body .options .option .label .info .main {
font-weight: bold;
font-size: 1.2rem;
}
body .options .option .label .info .sub {
transition-delay: 0.1s;
}
.icon .tag {
transform: rotate(90deg);
text-decoration: none;
line-height: 1 !important;
padding: 0 0 8px;
}
.main a {
color: #fff;
text-decoration: none;
}
.option:first-child .icon .tag {
color: #5D9CEC;
}
.option:nth-child(2) .icon .tag {
color: #d01a1a;
}
.option:nth-child(3) .icon .tag {
color: #b4d01a;
}
.option:nth-child(4) .icon .tag {
color: #3eab06;
}
.option:nth-child(5) .icon .tag {
color: #dca60c;
}
.sub:after {
content: "\f017";
font-family: fontawesome;
padding-left: 5px;
}

ثم ابحث عن الوسم </body>
وضع الأكواد التالية فوقه

<script type='text/javascript'>
//<![CDATA[
$("#IsweebSlider .widget").each(function(){
var e=$(this),
t=e.find(".widget-content").text(),
l=t.split("/"),
i=l[0],r=l[1],
n=Math.floor(Math.random()*i+1);
if(t.match("recentpost"))
var o="/feeds/posts/default?alt=json-in-script&max-results="+i;
else if(t.match("randompost"))
var o="/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+i;
else var o="/feeds/posts/default/-/"+r+"?alt=json-in-script&max-results="+i;
$.ajax({
type:"GET",
url:o,
dataType:"jsonp",
success:function(e){
for(var t="<ul class='isw-DySlider options'>",l="",i=0;i<e.feed.entry.length;i++){
for(var r=e.feed.entry[i],
postAuthor=r.author[0].name.$t,
uriauthor=r.author[0].uri.$t,
date=r.published.$t.substring(0,10),
n=r.title.$t,
o=0;o<r.link.length;o++){
if("replies"==r.link[o].rel&&"text/html"==r.link[o].type){r.link[o].title,r.link[o].href}if("alternate"==r.link[o].rel){
var f=r.link[o].href;break}}
var p,h=r.content.$t,u=$("<p>").html(h).text(),m=u.substring(0,180)+"...",
v=r.category[0].term;
try{p=0==i?r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault"):r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault")}catch(g){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),p=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0DBemkOKpTfMTm3a4P7lHba7yccFyu4ygenrUa5HsyHyD-kHLvfeX_mhFG8GgyBl0nQ30gY01r2Y2SwkNDo7y_8oXyHTWawZ8xgt5UyFFzqvNzX7rJOU3fngsZ1iEJP6OMLPhVgbJFpU/s1600/90.jpg"}
l+='<div class="option" style="--optionBackground:url('+p+');">',
l+='<div class="shadow">',
l+="</div>",
l+='<div class="label">',
l+='<div class="icon"><a class="tag" href="/search/label/'+v+'">'+v+"</a></div>",
l+='<div class="info">',
l+='<div class="main"><a href='+f+">"+n+"</a></div>",
l+='<div class="sub">'+date+"</div>",
l+="</div>",
l+="</div>",
l+="</div>",
l+="</div>"}
l+="</ul>",
t+=l,
$("#IsweebSlider .widget-content").html(t);
/*==============*/
//OwlCarousel-js
/*==============*/
$(".option").click(function(){
$(".option").removeClass("active");
$(this).addClass("active");
});
$(".option").each(function(){
$(".option:first").addClass("active");
});
}})
});
//]]>
</script>

الان قم بنسخ الأكواد التالية
وضعها في المكان الذي يناسبك ويفضل وضعها فوق main-wrapper

<div class='DySliderstyle-material' id='IsweebSlider'>
<b:section class='Isweeb-slickSlider' id='Isweeb-slickSlider' maxwidgets='1'>
<b:widget id='HTML748' locked='true' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>5/recentpost</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

ان أردت أن يعمل السلايد شو بتسمية فقم بتغيير قوالب بتسمية لديك وان أردت أن يظهر مواضيع عشوائية ضع مكان التسمية randompost ولعرض اخر المواضيع ضع مكانها recentpost

اضافات حصريات

نموذج الاتصال

متغيرات

فلترة الأقسام

فلترة جداول المباريات

تصميم شعار بالمجان لفترة محدودة !!

قالب عصام ويب ultra v

قالب ليفاي واتش

مارش ماج

قالب عصام ويب الحالي v3.0

برو سبورت 2.0

قالب نجاحي للمواقع التعليمية

تصميم قالب بلوجر متجاوب 2019

قالب اسبرطة 2019

قالب هلال

سلايد شو متجاوب بعدة خصائص

السلام عليكم
ورحمة الله تعالى
وبركاته

إرسال تعليق

نموذج الاتصال

متغيرات

فلترة الأقسام

فلترة جداول المباريات

سلايد شو متجاوب بعدة خصائص

السلام عليكم ورحمة الله تعالى وبركاته

إرسال تعليق

السلام عليكم
ورحمة الله تعالى
وبركاته