แบบง่ายๆ ก็ใช้พวกปลั๊กอิน slide แทนครับ มีฟังก์ชันปรับ responsive ให้เหมาะกับหน้าจอได้ด้วย
ถ้าจะโมฯ ของเดิม ที่เป็นฟรีเจอร์มากับธีม
พอจะมีตัวอย่าง CSS หรือ ฟังก์ชั่น ที่ปรับเป็น responsive ไหมค่ะ
ส่วนนี้มันจะเกี่ยวกับ CSS Style ไหมค่ะ ของธีมที่ใช้อยู่จะเป็นตามนี้ค่ะ
ใชธีม Accelerate อยู่ค่ะ
http://wordpress.org/themes/accelerate 
/* =FEATURED SLIDER
----------------------------------------------- */
#featured-slider {
}
#featured-slider,
#featured-slider .slider-cycle {
position: relative;
}
.slider-cycle {
}
#featured-slider .displayblock {
display: block;
}
#featured-slider .displaynone {
display: none;
}
#featured-slider .entry-container {
right: 4%;
margin: auto;
position: absolute;
bottom: 15%;
z-index: 999;
font-family: 'Roboto';
}
#featured-slider .entry-description-container {
}
#featured-slider img {
margin-bottom: 0px;
}
#featured-slider .slider-title-head {
left: 0;
margin-bottom: 10px;
text-align: right;
}
#featured-slider .entry-title {
padding: 0;
}
.slider-title-head .entry-title a {
color: #FFFFFF;
text-decoration: none;
background-color: #333; /*77CC6D*/
padding: 10px 15px;
max-width: 400px;
display: inline-block;
font-size: 22px;
}
#featured-slider .entry-content {
color: #FFFFFF;
display: inline-block;
max-width: 400px;
text-align: right;
}
#featured-slider .entry-content p {
margin: 0;
padding: 10px 15px;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
font-size: 15px;
}
#featured-slider .entry-container-left {
left: 4%;
right: auto;
}
#featured-slider .entry-container-left .slider-title-head {
text-align: left;
}
#featured-slider .entry-container-left .entry-content {
text-align: left;
}
.slider-nav {
bottom: 44%;
display: block;
position: absolute;
width: 100%;
z-index: 9;
}
.slider-nav i {
color: #FFFFFF;
font-size: 22px;
}
.slider-nav a.slide-next {
float: right;
padding-right: 8px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.slider-nav a.slide-prev {
float: left;
padding-left: 8px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.slider-nav a {
background-color: #333; /* #77CC6D */
opacity: 0.7;
filter:alpha(opacity=70);
padding: 12px 14px;
visibility: hidden;
}
.slider-cycle:hover .slider-nav a {
visibility: visible;
}
.slider-nav a:hover {
opacity: 1;
filter:alpha(opacity=100);
}
/* =SLIDER CONTROLLERS
----------------------------------------------- */
#controllers {
text-align:center;
line-height:0;
position: absolute;
width: 100%;
bottom: 15px;
z-index: 9;
}
#controllers a {
width: 16px;
height: 6px;
margin: 0 4px;
overflow:hidden;
display:inline-block;
background-color: #FFFFFF;
color: #FFFFFF;
}
#controllers a:hover, #controllers a.active {
background-color: #333; /* #77CC6D */
color: #333; /* #77CC6D */
}
พัฒนาเว็บไซต์
