How To Add A Responsive Slider On Osclass Website (Using Contributed Osclass Slider Plugin)?

Sliders or Slideshows are dynamic elements usually displayed in home page of websites. Usually with a catchy background image and phrases, they grab attention. They are great additions to any websites to add more aesthetics to websites. Since they are dynamic, websites look more grand and alive. They can also be used to display important content and graphics to engage with visitors. And though sliders are not so good in terms of making websites easily accessible on mobiles over data network due to higher load times, it has still become a standard web design layout. 

If you are already here then I suppose you know what OSCLASS is, if not, OSCLASS is a free and open source classified ad script used for building classified ad websites. You can go to OSCLASS.COM and check out more.

In this post, we shall see how to add responsive sliders in OSCLASS website. For this example, I am using the Bender theme, but you can apply to any OSCLASS theme.

Step One:

Download and Install OSCLASS Slider Plugin (Contributed Plugins)

• Go to this OSCLASS lembaga post and download the slider plugin from the first post and read a little about the plugin. Or the direct link to download this plugin -click here.  [Thanks to RajaSekar for this plugin]
• After the slider plugin is downloaded, extract it. And then ,copy the entire slider folder and paste it in "\oc-content\plugins"
• Login to your OSCLASS website as admin and navigate to "Manage Plugins" page
• You should now see a new plugin by the name "OSC Slider" to be installed.
• Click install to install the slider plugin

• After installation of the slider plugin, you should be able to see a new icon on the sidebar in the admin page. On hovering on the slider icon on the sidebar, you should be able to see four sajian links - 
• create - page where you can create the slides
• manage - page where you can manage the slides
• settings - page where you can sonfigure some settings for the slides such as background color, delay, borders etc. There are quite a good number of settings provided.
• FAQ/Help 

Step Two:
Enabling the slider on the home page

After the OSCLASS slider plugin is downloaded and installed, it is now time to enable the slider on the home page of OSCLASS website. As per the FAQ page of the plugin, we are supposed to find "<div class="content home">" in main.php and after which we are to add  <?php osc_slider(); ?>. So it finally looks like -

 <div class="content home">
<?php osc_slider(); ?>    

But when I checked Bender theme, I could not find "<div class="content home">" in main.php or in header.php. But I did find it in Modern Theme.

Nevertheless, the PHP code that is required to enable the plugin is "<?php osc_slider(); ?>  " which we can place anywhere in any theme. So we shall apply the above code in Bender theme as discussed below.

Placing the slider right below search kafe and above the listing categories in home page of Bender theme

Since I am using Bender Theme, I decided to place the slider between the search kafe and the listing categories as it seemed most appropriate place to place the slider. 

• Open header.php from \oc-content\themes\bender
• Search for  <?php osc_show_widgets('header'); ?>
• There will be a </div> right above <?php osc_show_widgets('header'); ?> we searched
• Place the following code right above the  </div> as shown below:

    <?php if( osc_is_home_page()) { ?>
    <?php osc_slider(); ?>
    <?php } ?>
   
</div>
<?php osc_show_widgets('header'); ?>

• Now, go back to the OSCLASS home page and refresh to see the new slider. The slider uses jQuery and it is responsive.

You may go back to the slider plugin settings page to configure the properties of the slider if you desire to make some changes.

Enjoy the new slider on the OSCLASS homepage.

Note: If in case, the plugin is not available any more on the above link, shoot me an email at tiyiworo@gmail.com. I may be able to provide a copy if I still have it. 

Sumber http://techubber.blogspot.com/

Share this post